Node position adjustment method and apparatus, electronic device, and storage medium

Abstract

The application discloses a node position adjusting method and device, electronic equipment and a storage medium, relates to the technical field of workflow canvas and node position adjustment, and comprises the following steps: in response to a display state switching event of a function node being triggered, determining a current display state of a target display area corresponding to the function node; according to the current display state, determining a target display state of the target display area, and calculating a height change amount when the target display area is switched from the current display state to the target display state; obtaining all downstream nodes downstream of the function node in the canvas; according to the height change amount, performing offset updating on the position coordinates of all the downstream nodes to obtain updated position coordinates of each downstream node; and updating the connection path between each downstream node according to the updated position coordinates of each downstream node. The scheme improves the efficiency of canvas layout adjustment.

Description

Technical Field

[0001] This application relates to workflow canvas technology and node position adjustment technology, and in particular to a node position adjustment method, device, electronic device and storage medium. Background Technology

[0002] In the workflow canvas, once a functional node completes its execution, a corresponding product node is generated. The product node is displayed in the target display area below the functional node. Users can trigger a display state toggle event to switch the target display area from an expanded state to a collapsed state to hide the product node, or from a collapsed state to an expanded state to view the product node. During the switching process, the height of the target display area decreases or increases accordingly.

[0003] In existing canvas layout solutions, when the height of the target display area changes due to a change in display state, the position coordinates of all nodes downstream of that functional node remain unchanged, as do the connection paths between downstream nodes. When the target display area increases in height, it extends to cover downstream nodes; when it decreases in height, it creates blank gaps, disrupting the compactness of the canvas layout. Users need to drag and adjust the positions of downstream nodes one by one and correct the connection paths line by line. These operations must be performed repeatedly after each state change, making the process cumbersome and inefficient. Summary of the Invention

[0004] This application provides a node position adjustment method, device, electronic device, and storage medium to solve the technical problem in the prior art that after the height of the target display area changes, it is necessary to manually drag and adjust the position of downstream nodes one by one and correct the connection path line by line, which is cumbersome and inefficient.

[0005] In a first aspect, embodiments of this application provide a node position adjustment method, including: In response to the display state switching event of the triggered functional node, determine the current display state of the target display area corresponding to the functional node; Based on the current display state, determine the target display state of the target display area, and calculate the height change of the target display area when switching from the current display state to the target display state; Obtain all downstream nodes in the canvas that are downstream of the functional node; Based on the height change, the position coordinates of all downstream nodes are updated by offset, resulting in the updated position coordinates of each downstream node. Update the connection paths between the downstream nodes based on their updated position coordinates.

[0006] Secondly, embodiments of this application provide a node position adjustment device, comprising: The first determining module is used to determine the current display state of the target display area corresponding to the function node in response to the display state switching event that triggers the function node; The second determining module is used to determine the target display state of the target display area based on the current display state, and to calculate the height change of the target display area when it switches from the current display state to the target display state. The acquisition module is used to acquire all downstream nodes in the canvas that are located downstream of the functional node; The first update module is used to perform offset update on the position coordinates of all the downstream nodes according to the height change, so as to obtain the updated position coordinates of each downstream node. The second update module is used to update the connection path between the downstream nodes according to the updated position coordinates of each downstream node.

[0007] Thirdly, embodiments of this application provide an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the above-described node position adjustment method.

[0008] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps of the above-described node position adjustment method.

[0009] Based on this, the beneficial effects of a technical solution provided in this application embodiment are as follows: By responding to the display state switching event of the triggering functional node, the current display state of the target display area corresponding to the functional node is determined, and the target display state of the target display area is determined, so as to clarify the switching direction of the display state; by calculating the height change of the target display area when switching from the current display state to the target display state, all downstream nodes located downstream of the functional node in the canvas are obtained, and the position coordinates of all downstream nodes are offset and updated according to the height change, so that all downstream nodes are translated by a distance equal to the height change. When the height of the target display area changes, the relative vertical position relationship between the downstream nodes and the target display area remains unchanged, which avoids the target display area from covering the downstream nodes due to the increase in height, and also avoids the blank gap between the target display area and the downstream nodes due to the decrease in height, thereby replacing the operation of manually dragging and adjusting the position of the downstream nodes one by one by the user; by updating the connection path between each downstream node according to the updated position coordinates of each downstream node, the anchor point of the connection is matched with the updated position of the node, avoiding the misalignment or intersection of the connection after the node position changes, thereby replacing the operation of manually correcting the connection path one by one by the user. Therefore, when the height of the target display area changes due to the display state switch, this application automatically completes the linkage offset of the downstream node position and the synchronous update of the connection path, eliminating the need for users to manually drag and adjust the downstream node position one by one and correct the connection path line by line, reducing user operation steps and improving the efficiency of canvas layout adjustment. Attached Figure Description

[0010] To more clearly illustrate the technical solutions of the embodiments of this application, the drawings used in the description of the embodiments of this application 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.

[0011] Figure 1 This is a schematic diagram of an application environment for a node position adjustment method in one embodiment of this application; Figure 2 This is a flowchart illustrating a node position adjustment method in one embodiment of this application; Figure 3 This is a schematic diagram of a node position adjustment device in one embodiment of this application; Figure 4 This is a schematic diagram of the structure of an electronic device according to an embodiment of this application. Detailed Implementation

[0012] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0013] The node position adjustment method provided in this application embodiment can be applied to, for example... Figure 1 The application environment shown. Specifically, this node position adjustment method is applied in a node position adjustment system, which includes, as shown in the example. Figure 1 The diagram illustrates a client and server that communicate over a network to implement the node position adjustment method. The client, also known as the user terminal, is a program that provides local services to the client, corresponding to the server. Clients can include, but are not limited to, various personal computers, laptops, smartphones, and tablets. The server can be a standalone server or a server cluster consisting of multiple servers.

[0014] Firstly, such as Figure 2 As shown, this application embodiment provides a node position adjustment method, which is applied to... Figure 1 Taking the server in the example, the following steps are included: S101: In response to the display state switching event that triggers the functional node, determine the current display state of the target display area corresponding to the functional node; S102: Based on the current display state, determine the target display state of the target display area and calculate the height change of the target display area when switching from the current display state to the target display state.

[0015] As an example, a functional node refers to the core execution unit in the workflow canvas used to perform executable logic such as AI generation, data processing, and format conversion, such as the Wenshengtu node. The target display area refers to the dedicated visual rectangular area reserved below the functional node, used to hold the product nodes generated after the functional node runs, such as the area below the Wenshengtu node used to display the generated images. The current display state refers to the status information of whether the target display area is currently expanded or collapsed. The display state switching event refers to the state switching command triggered by the user clicking the "Generate Result" button in the upper right corner of the functional node. The target display state refers to the state that the target display area should present after completing this state switch. The height change refers to the vertical dimension change of the target display area when switching from the current display state to the target display state.

[0016] Upon receiving a display state switching event, the server determines the current display state of the target display area corresponding to the functional node and, based on the current display state, determines the target display state. The server can accurately determine whether the user's intention is to switch the target display area from expanded to collapsed or from collapsed to expanded, thus clarifying the direction of this adjustment. By calculating the height change of the target display area when switching from the current display state to the target display state, the server can accurately quantify the vertical size change of the target display area, quantifying the expanded direction as a positive value and the collapsed direction as a negative value, allowing subsequent processing steps to directly use these values ​​as the basis for displacement. Therefore, the server completes the entire perception process of "direction recognition + amplitude quantization" at the initial stage of the state switch, providing accurate input data for subsequent automated position adjustments without the need for manual measurement and calculation, thereby ensuring the feasibility and accuracy of subsequent automated adjustments.

[0017] S103: Get all downstream nodes in the canvas that are downstream of the functional node; S104: Based on the height change, perform offset updates on the position coordinates of all downstream nodes to obtain the updated position coordinates of each downstream node; S105: Based on the updated position coordinates of each downstream node, update the connection paths associated with each downstream node to complete the adjustment of node positions.

[0018] As an example, all downstream nodes refer to all nodes located downstream of the functional nodes in the directed acyclic graph of the workflow. This includes first-level downstream nodes directly connected to the functional nodes, as well as multi-level downstream nodes indirectly connected through multi-level links. Position coordinates refer to the position of a downstream node in the canvas coordinate system, consisting of two values: X-axis coordinates and Y-axis coordinates. The X-axis coordinate represents the node's position in the horizontal direction, and the Y-axis coordinate represents the node's position in the vertical direction. Offset update refers to translating the downstream node's position coordinates along the Y-axis according to the change in height. That is, when the change in height is positive, the downstream node moves along the positive Y-axis (downward); when the change in height is negative, the downstream node moves along the negative Y-axis (upward). Updated position coordinates refer to the new position coordinates of the downstream node in the canvas coordinate system after the offset update. A connection path refers to the visual connection between two nodes. Each downstream node is associated with at least one input connection from the upstream node to itself.

[0019] The server first uses a functional node as the starting node and traverses all execution paths in the directed acyclic graph of the workflow to obtain all nodes reachable from the functional node, which are then considered as all downstream nodes. By obtaining all downstream nodes, the server can accurately define the range of all nodes involved in this displacement adjustment, effectively avoiding layout errors caused by missing downstream nodes. Subsequently, the server uses the height change calculated in S102 as the target offset and performs a uniform offset update on all downstream nodes. This involves adding the current Y-axis coordinate of each downstream node to the target offset to obtain the updated Y-axis coordinate, while the X-axis coordinate remains unchanged. By moving all downstream nodes by the same offset, the server ensures that the relative vertical positional relationship between downstream nodes remains consistent before and after the displacement. Therefore, when the height of the target display area changes, the downstream nodes move as a whole, preventing insufficient movement that would cause downstream nodes to be covered by the target display area, and also preventing excessive movement that would create gaps between downstream nodes and the target display area. Finally, the server regenerates the connection paths associated with each downstream node based on the updated position coordinates of that downstream node, ensuring that the endpoint coordinates of the connection paths match the updated position coordinates of the nodes, thus completing the dynamic adjustment of the node positions. Since the position of a node changes, the endpoint coordinates of its associated connection paths must also be updated accordingly; otherwise, the connection will detach from the node or become misaligned. By regenerating the connection paths based on the updated position coordinates, the server ensures that the connection paths maintain the correct connection state after a node moves, resulting in smooth and misaligned connection paths. Therefore, when the height of the target display area changes due to a change in display state, the server automatically completes the linked offset of the downstream node positions and the synchronous update of the connection paths to adjust the node positions. This eliminates the need for users to manually drag and adjust the positions of downstream nodes one by one and correct the connection paths line by line, reducing user operations and improving the efficiency of canvas layout adjustments.

[0020] In summary, S101 first identifies the current display state and determines the target display state, providing a basis for subsequent calculations. Then, S102 calculates the height change of the target display area as a quantitative benchmark for subsequent offset updates. Next, S103 obtains all downstream nodes downstream of the functional node, accurately defining the node range involved in this adjustment. Then, S104 performs a unified offset update on the position coordinates of all downstream nodes based on the height change, ensuring that all downstream nodes are translated by a distance equal to the height change. This ensures that the relative vertical positional relationship between the downstream nodes and the target display area remains unchanged when the target display area height increases or decreases, preventing the target display area from covering downstream nodes due to height increase and avoiding gaps due to height decrease. Finally, S105 regenerates the associated connection paths based on the updated position coordinates of the downstream nodes, matching the endpoint coordinates of the connection paths with the updated position coordinates of the nodes. This ensures that the connection remains correctly connected to the nodes after they move, preventing misalignment or intersection of connections after node position changes. Therefore, when the height of the target display area changes due to the display state switch, this application automatically completes the linkage offset of the downstream node position and the synchronous update of the connection path, eliminating the need for users to manually drag and adjust the downstream node position one by one and correct the connection path line by line, reducing user operation steps and improving the efficiency of canvas layout adjustment.

[0021] In one embodiment, calculating the height change of the target display area when switching from the current display state to the target display state includes the following steps: S121: When the current display state is collapsed and the target display state is expanded, obtain the expanded height of the target display area, and use the expanded height as the height change amount. The height change amount is a positive value. S122: When the current display state is expanded and the target display state is collapsed, obtain the current height of the target display area and use the current height as the height change amount, which is a negative value.

[0022] As an example, the expanded height refers to the vertical dimension of the target display area in its fully expanded state. This value is pre-stored in the target display area's attribute data and is determined by the number, size, and layout of the rendered artifact nodes within the target display area. The current height refers to the actual vertical dimension of the target display area at the current moment, i.e., the real-time height of the target display area before this state transition operation. A positive height change indicates that the target display area's vertical dimension has increased, and downstream nodes need to move along the positive Y-axis (downward) to avoid it; a negative height change indicates that the target display area's vertical dimension has decreased, and downstream nodes need to move along the negative Y-axis (upward) to fill the released space.

[0023] After determining the current display state and the target display state, the server executes different calculation logic based on their specific combination. When the current display state is collapsed and the target display state is expanded, it indicates that the user intends to switch the target display area from collapsed to expanded, and the height of the target display area will increase from 0 to the expanded height. At this time, the server reads the pre-stored expanded height from the attribute data of the target display area and uses this expanded height as the height change. This height change is positive and its value is equal to the size of the expanded height, indicating that the vertical dimension of the target display area has increased by the distance corresponding to the expanded height.

[0024] When the current display state is expanded and the target display state is collapsed, it indicates that the user intends to switch the target display area from expanded to collapsed, and the height of the target display area will decrease from the current height to 0. At this time, the server obtains the actual vertical size of the target display area at the current moment as the current height, and uses this current height as the height change. The value of this height change is negative, and its value is equal to the current height, indicating that the vertical size of the target display area has decreased by the distance corresponding to the current height.

[0025] In a specific example, the target display area of ​​the text image node is currently collapsed, with an expanded height of 430 pixels. When the user clicks the "Generate Results" button in the upper right corner of the text image node, the server determines that the current display state is collapsed and the target display state is expanded. The server reads the expanded height of 430 pixels from the target display area's attribute data and uses this expanded height as a height change factor of +430 pixels, indicating that the vertical size of the target display area increases by 430 pixels.

[0026] In another specific example, the target display area of ​​the text image node is currently in an expanded state with a current height of 430 pixels. When the user clicks the "Generate Result" button in the upper right corner of the text image node again, the server determines that the current display state is expanded and the target display state is collapsed. The server obtains the current height of the target display area (430 pixels) and uses this as the height change, which is -430 pixels, indicating that the vertical size of the target display area has decreased by 430 pixels.

[0027] As can be seen, in this embodiment, by executing corresponding calculation logic based on different combinations of the current display state and the target display state—reading the expanded height as a positive value when switching from collapsed to expanded, and reading the current height as a negative value when switching from expanded to collapsed—the server can accurately quantify the direction (sign) and magnitude (absolute value) of the vertical size change of the target display area. This sign directly indicates the movement direction of downstream nodes, and the absolute value can be directly used as the movement distance of downstream nodes. This eliminates the need for additional direction judgment or numerical conversion in subsequent offset update steps, allowing the height change to be directly used as the displacement basis, simplifying the calculation process for adjusting the position of downstream nodes and improving processing efficiency.

[0028] In one embodiment, obtaining all downstream nodes located downstream of the functional node in the canvas includes the following steps: S131: Starting with a functional node, perform graph traversal using a preset search algorithm in the directed acyclic graph corresponding to the canvas to obtain all nodes reachable from the starting node, which are then used as downstream nodes. The preset search algorithms include breadth-first search or depth-first search.

[0029] As an example, a directed acyclic graph (DAG) is a topological structure graph in a workflow canvas composed of functional nodes and their connections. Nodes in the graph represent functional nodes, and directed edges represent the data flow or execution order between functional nodes. A preset search algorithm refers to a graph search algorithm used to traverse the DAG, which may include breadth-first search and depth-first search algorithms.

[0030] Breadth-first search (BFS) starts from the functional node and expands outwards layer by layer along the directed edges. It first visits all first-level downstream nodes directly connected to the functional node by directed edges, then visits all second-level downstream nodes directly connected to the first-level downstream nodes, and so on, until all reachable nodes have been traversed. A key characteristic of BFS is that it traverses nodes in order of increasing topological dependency distance from the functional node. The traversal results are naturally arranged in topological hierarchy order, facilitating subsequent topological hierarchy partitioning and step-by-step offset updates.

[0031] The Depth-First Search (DFS) algorithm starts from a functional node and traverses an execution path in the direction of directed edges, prioritizing depth. It reaches the endpoint (the node with no outgoing edges) along the path, then backtracks to the previous branch point and continues traversing the next path until all reachable nodes have been traversed. The key characteristic of DFS is its depth-first traversal along the execution path, making it suitable for scenarios where nodes need to be processed in the order of the execution path.

[0032] In a specific example, the workflow canvas contains a text graph node as a functional node, whose output connects to two parallel branches: an image super-resolution node and a style transfer node. The output of the image super-resolution node connects to an image editing node, and the output of the style transfer node connects to an image fusion node. The connections between the text graph node, image super-resolution node, style transfer node, image editing node, and image fusion node form a directed acyclic graph, with the text graph node as the starting node.

[0033] The server employs a breadth-first search (BFS) algorithm to traverse the graph, starting from the raw graph nodes. The BFS begins by visiting image super-resolution nodes and style transfer nodes (level 1) that are directly connected to the raw graph nodes via directed edges. Then, starting from each image super-resolution node and style transfer node, it visits image editing nodes and image fusion nodes that are directly connected to them via directed edges (level 2). After traversal, the server treats the image super-resolution nodes, style transfer nodes, image editing nodes, and image fusion nodes as all downstream nodes. Since the BFS traversal results are naturally arranged in hierarchical order, the server can directly obtain that the first level consists of image super-resolution nodes and style transfer nodes, and the second level consists of image editing nodes and image fusion nodes. This result can be directly used for subsequent topology hierarchical partitioning.

[0034] In another specific example, the server uses a depth-first search algorithm to perform graph traversal starting from the raw image node. The depth-first search begins with the raw image node, first traversing deeply along the path from the raw image node to the image super-resolution node, visiting the image super-resolution node, then continuing along the path from the image super-resolution node to the image editing node, visiting the image editing node. Upon reaching the endpoint, it backtracks to the raw image node, then traverses along the path from the raw image node to the style transfer node, visiting the style transfer node, and then continues along the path from the style transfer node to the image fusion node, visiting the image fusion node. After the traversal is complete, the server treats the image super-resolution node, style transfer node, image editing node, and image fusion node as all downstream nodes. The traversal results of the depth-first search are arranged in the order of the execution path, making it suitable for scenarios where nodes need to be processed in the order of the execution path.

[0035] Regardless of whether breadth-first search or depth-first search is used, the server can start from the functional node, traverse the entire directed acyclic graph along the direction of the directed edges, and obtain all nodes reachable from the functional node as downstream nodes, ensuring that the traversal range of downstream nodes is complete and without omission.

[0036] As can be seen, in this embodiment, by employing a preset search algorithm to perform graph traversal on the directed acyclic graph of the workflow, all reachable nodes are obtained starting from the functional nodes as downstream nodes. This ensures that subsequent position adjustment operations can cover all downstream nodes that need to be moved, avoiding layout errors caused by some nodes not being adjusted due to omissions. The breadth-first search algorithm is suitable for scenarios where nodes need to be processed in topological hierarchy order, while the depth-first search algorithm is suitable for scenarios where nodes need to be processed in execution path order. The two algorithms can be flexibly selected according to actual needs.

[0037] In one embodiment, the position coordinates of all downstream nodes are updated by offset based on the height change to obtain the updated position coordinates of each downstream node, including the following steps: S141: Use the change in altitude as the target offset; S142: Divide all downstream nodes into N topological levels in the direction from upstream to downstream, where N≥1; where nodes in the first topological level are nodes that have a direct directed edge with the functional nodes; nodes in the i-th topological level are nodes that have a direct directed edge with the nodes in the (i-1)-th topological level and do not belong to any of the topological levels from the 1st to the (i-1)th topological level, where 2≤i≤N; S143: Following the topological hierarchy, starting from the first topological hierarchy, perform offset updates level by level to obtain the updated position coordinates of each downstream node; Specifically, when performing the offset update for the current topology level, the following operations are performed in parallel on each downstream node within the current topology level: S144A: Add the current Y-axis coordinate value of the downstream node to the target offset to obtain the updated Y-axis coordinate value of the downstream node; S144B: Keep the X-axis coordinate value of the downstream node unchanged from the current X-axis coordinate value; S144C: ​​Use the updated Y-axis coordinate and the current X-axis coordinate of the downstream node as the updated position coordinates of the downstream node.

[0038] As an example, the target offset refers to the total distance that all downstream nodes need to move in the Y-axis direction. In this embodiment, the height change is directly used as the target offset. The topology hierarchy is divided according to the topological dependency distance (i.e., the number of directed edges between nodes) between downstream nodes and functional nodes. The smaller the topological dependency distance, the earlier the hierarchy. Nodes in the first topology hierarchy are those with a direct directed edge to the output of a functional node, i.e., downstream nodes directly connected to the output of a functional node. Nodes in the second topology hierarchy are those with a direct directed edge to the output of a node in the first topology hierarchy but not belonging to the first topology hierarchy, i.e., downstream nodes indirectly connected to a functional node through an intermediate node; and so on. Nodes in the i-th topology hierarchy are those with a direct directed edge to nodes in the (i-1)-th topology hierarchy but not belonging to any of the topology hierarchies from 1 to (i-1). Downstream nodes within the same topology hierarchy are independent of each other, each on a different execution branch, and have no direct upstream / downstream relationship. Therefore, they can be processed in parallel without waiting for other nodes within the same hierarchy to complete their movement.

[0039] After dividing all downstream nodes into N topology levels, the server performs offset updates level by level, starting from the first topology level and proceeding in ascending order of topology level. When updating the offset of the current topology level, the server performs the following operations in parallel for each downstream node within that level: It adds the current Y-axis coordinate of the downstream node to the target offset to obtain the updated Y-axis coordinate; it keeps the X-axis coordinate of the downstream node unchanged; and it uses the updated Y-axis coordinate and the unchanged X-axis coordinate as the updated position coordinate of the downstream node. All downstream nodes within the same topology level perform the above summation calculation and coordinate update operations simultaneously without blocking each other, thus improving overall processing efficiency.

[0040] In a specific example, the downstream nodes of the text graph node include an image super-resolution node and an image editing node. The image super-resolution node is directly connected to the text graph node (there is a direct directed edge), while the image editing node is indirectly connected to the text graph node through the image super-resolution node (there is a direct directed edge between them). The server classifies the image super-resolution node as the first topological level and the image editing node as the second topological level. The height change is +320 pixels, and the server uses +320 pixels as the target offset. The server first processes the first topological level: concurrently processes the image super-resolution node, updating its Y-axis coordinate from 300 to 300+320=620, while keeping its X-axis coordinate unchanged. Then it processes the second topological level: updates the Y-axis coordinate of the image editing node from 450 to 450+320=770, while keeping its X-axis coordinate unchanged. The vertical spacing between the two nodes is 450-300=150 pixels before the movement and 770-620=150 pixels after the movement, maintaining the same relative vertical positional relationship.

[0041] As can be seen, in this embodiment, by dividing all downstream nodes into multiple topological levels according to their topological dependency distances and performing offset updates level by level from upstream to downstream, it is ensured that downstream nodes move sequentially according to their logical execution order, avoiding the disorder of relative positions between levels caused by improper adjustment order. By performing offset updates in parallel for each downstream node within the same topological level, the waiting time between nodes within the level is eliminated, improving the execution efficiency of layout adjustment. By uniformly applying the same target offset to downstream nodes within the same topological level, it is ensured that the relative positions of each node in the vertical direction within the same level remain unchanged, avoiding the accumulation of errors caused by adjusting them one by one. Thus, efficient and accurate batch position updates are achieved while ensuring that the topological relationship remains unchanged after the overall movement of downstream nodes.

[0042] It should be noted that when dividing all downstream nodes into N topology levels from upstream to downstream, the following can also be included: when nested sub-process nodes exist within a downstream node, the server classifies the nested sub-process node as a single downstream node into the corresponding topology level, instead of classifying its individual nodes into separate topology levels. During offset updates, the server first updates the position coordinates of the nested sub-process node (i.e., adding the current Y-axis coordinate value of the nested sub-process node to the target offset). Then, based on the change in the position coordinates of the nested sub-process node (i.e., the difference between the updated Y-axis coordinate value and the original Y-axis coordinate value), it synchronously updates the position coordinates of all nodes within the nested sub-process (i.e., adding the current Y-axis coordinate value of each internal node to the change, while keeping the X-axis coordinate unchanged). This ensures that after the nested sub-process node moves as a whole on the canvas, the relative positions and layout of its internal nodes remain completely unchanged, avoiding the problem of misaligned relative positions of internal nodes caused by progressively executing offset updates across different topology levels, thus guaranteeing the encapsulation of the sub-process and the consistency of its internal layout.

[0043] In one embodiment, prior to performing the offset update for the current topology level, the method further includes: S144D: Get the vertical distance between adjacent downstream nodes in the current topology level; S144E: When the vertical spacing is less than the preset safety spacing threshold, the compensation displacement is added to the target offset to obtain the corrected offset. S144F: Replace the target offset with the corrected offset and perform offset updates on each downstream node in the current topology level.

[0044] As an example, the preset safety spacing threshold refers to the minimum vertical distance that adjacent downstream nodes in the canvas must maintain, such as 40 pixels. The compensation displacement is the additional displacement required to restore the vertical spacing to the safety spacing threshold, calculated as: Compensation Displacement = Preset Safety Spacing Threshold - Current Vertical Spacing. Correction Offset = Target Offset + Compensation Displacement.

[0045] Before performing offset updates for the current topology level, the server first obtains the vertical spacing between adjacent downstream nodes within that level. Vertical spacing refers to the vertical distance between the rectangular regions of two downstream nodes, equal to the difference between the top Y-axis coordinate of the downstream node and the bottom Y-axis coordinate of the upstream node. The server compares the obtained vertical spacing with a preset safety spacing threshold. If the vertical spacing is less than the threshold, it indicates that nodes within that level are too close together. If the offset update is performed directly based on the target offset, this insufficient spacing problem will persist. Therefore, the server adds a compensation displacement to the target offset to obtain a corrected offset, and then uses this corrected offset to replace the target offset to perform offset updates for each downstream node within the current topology level.

[0046] In a specific example, in the workflow canvas, the downstream of the texturing graph node (functional node) includes an image super-resolution node and a style transfer node at the first topology level. These two nodes are located on two parallel branches and belong to the same topology level. The image super-resolution node has a position coordinate of (400, 500) and a height of 80 pixels. The Y-coordinate of its bottom edge is 500 + 80 = 580. The style transfer node has a position coordinate of (600, 560) and a height of 80 pixels. The Y-coordinate of its top edge is 560. The vertical spacing between the image super-resolution node and the style transfer node is 560 - 580 = -20 pixels, meaning that the rectangular areas of the two nodes overlap vertically (negative spacing indicates overlap), and the vertical height of the overlapping area is 20 pixels.

[0047] Before performing the offset update for the first topology level, the server obtains the vertical spacing between adjacent downstream nodes (image super-resolution nodes and style transfer nodes) within this level as -20 pixels. The preset safe spacing threshold is 40 pixels; the server detects that -20 < 40, determining that the current vertical spacing is less than the preset safe spacing threshold. The server calculates the compensation displacement = 40 - (-20) = 60 pixels, meaning an additional 60 pixels of displacement is needed on top of the target offset. The server obtains the target offset as +320 pixels (from the height change calculated in S102), and adds the compensation displacement of 60 pixels to the target offset of 320 pixels, resulting in a corrected offset of 320 + 60 = 380 pixels. The server replaces the target offset of 320 pixels with the corrected offset of 380 pixels and performs offset updates on the image super-resolution nodes and style transfer nodes within the first topology level.

[0048] The current Y-axis coordinate of the image super-resolution node is 500, and after the update, the Y-axis coordinate is 500 + 380 = 880; the current Y-axis coordinate of the style transfer node is 560, and after the update, the Y-axis coordinate is 560 + 380 = 940. After the update, the bottom edge Y-axis coordinate of the image super-resolution node is 880 + 80 = 960, and the top edge Y-axis coordinate of the style transfer node is 940. The vertical distance between them is 940 - 960 = -20 pixels, and the overlap problem still exists, still not meeting the preset safe distance threshold of 40 pixels. At this time, the server continues to perform offset updates with the corrected offset and finds that the distance is still insufficient. It further increases the compensation displacement by 40 - (-20) = 60 pixels, which is superimposed on the corrected offset, so that the vertical distance between adjacent downstream nodes in the first level reaches the preset safe distance threshold of 40 pixels.

[0049] If the server does not perform the above spacing verification and compensation, and directly updates the first topology level with a target offset of 320 pixels, the updated Y-axis coordinate of the image super-resolution node will be 500 + 320 = 820, the updated Y-axis coordinate of the style transfer node will be 560 + 320 = 880, the bottom edge Y-axis coordinate of the image super-resolution node will be 820 + 80 = 900, and the top edge Y-axis coordinate of the style transfer node will be 880. The vertical spacing between them will be 880 - 900 = -20 pixels. The two nodes still overlap, which fails to meet the compliance requirements of the canvas layout. By increasing the compensation displacement by 60 pixels, the vertical spacing between the two nodes changes from -20 pixels to 40 pixels, eliminating the overlapping area and meeting the safety spacing requirements.

[0050] In another specific example, the second topology level contains an image editing node (position coordinates (400, 700), node height 80 pixels) and an image fusion node (position coordinates (600, 740), node height 80 pixels). The bottom edge Y-axis coordinate of the image editing node is 700 + 80 = 780, and the top edge Y-axis coordinate of the image fusion node is 740. The vertical distance between them is 740 - 780 = -40 pixels. The preset safe distance threshold is 40 pixels. The server detects that -40 < 40, and calculates the compensation displacement as 40 - (-40) = 80 pixels. Based on the target offset of 320 pixels, the compensation displacement of 80 pixels is added, resulting in a corrected offset of 400 pixels. The server performs an offset update on the second topology level with a correction offset of 400 pixels. After the update, the Y-axis coordinate of the image editing node is 700 + 400 = 1100, and the Y-axis coordinate of the image merging node is 740 + 400 = 1140. The vertical distance between them is 1140 - (1100 + 80) = 1140 - 1180 = -40 pixels, which still overlaps. The server further increases the compensation displacement to 80 pixels to restore the distance to 40 pixels.

[0051] As can be seen, in this embodiment, by detecting the vertical spacing between adjacent downstream nodes in the current topology level before performing the offset update, and adding a compensation displacement based on the target offset when the spacing is less than the preset safe spacing threshold, the problem of overlap or visual crowding caused by insufficient spacing between adjacent nodes in the same topology level is eliminated, ensuring that the vertical spacing between all adjacent downstream nodes in the current level meets the preset safe spacing requirements.

[0052] In one embodiment, updating the connection paths associated with each downstream node based on the updated position coordinates of each downstream node includes the following steps: S151: For each connection path: obtain the updated position coordinates of the outgoing downstream node of the connection path as the first updated position coordinates; obtain the updated position coordinates of the incoming downstream node of the connection path as the second updated position coordinates; based on the first updated position coordinates and the second updated position coordinates, regenerate the connection path between the outgoing downstream node and the incoming downstream node to update the connection path associated with each downstream node.

[0053] As an example, a connection path refers to a visual connection between two nodes, where each downstream node is associated with at least one input connection from its upstream node. Each connection path has outgoing downstream nodes and incoming downstream nodes: the outgoing downstream node is the node where the connection path begins (i.e., the upstream node on the connection path), and the incoming downstream node is the node where the connection path ends (i.e., the downstream node on the connection path). The first updated position coordinates refer to the position coordinates of the outgoing downstream node after the offset update, and the second updated position coordinates refer to the position coordinates of the incoming downstream node after the offset update.

[0054] After updating the position coordinates of all downstream nodes, the server iterates through every connection path associated with a downstream node in the canvas. For the currently traversed connection path, the server first obtains the updated position coordinates of the outgoing downstream node as the first updated position coordinates, and obtains the updated position coordinates of the incoming downstream node as the second updated position coordinates. Then, based on the first and second updated position coordinates, the server regenerates the connection path between the outgoing and incoming downstream nodes, ensuring that the endpoint coordinates of the connection path match the updated position coordinates of the nodes. The server processes each connection path sequentially until all connection paths have been updated.

[0055] In a specific example, the workflow canvas contains a path connecting the textural graph node to the image super-resolution node. Before the offset update, the textural graph node (outgoing downstream node) has coordinates (200, 300), a width of 160 pixels, and a height of 80 pixels. The image super-resolution node (incoming downstream node) has coordinates (400, 500), a width of 160 pixels, and a height of 80 pixels. After the user performs an expand operation, the height changes by +320 pixels. The server performs an offset update on the downstream node of the textural graph node. The textural graph node itself does not participate in this offset update, and its coordinates remain unchanged at (200, 300). The image super-resolution node's Y-axis coordinate is updated from 500 to 500 + 320 = 820, while its X-axis coordinate remains unchanged at 400. After the update, its coordinates are (400, 820).

[0056] When the server iterates through the path connecting the raw image node to the super-resolution image node, it obtains the updated position coordinates (200, 300) of the raw image node as the first updated position coordinates, and obtains the updated position coordinates (400, 820) of the super-resolution image node as the second updated position coordinates. The coordinates of the center point of the right edge of the raw image node (i.e., the anchor point in the outgoing direction) are: X-axis coordinate 200 + 160 = 360, Y-axis coordinate 300 + 80 / 2 = 340, i.e., (360, 340). The coordinates of the center point of the left edge of the super-resolution image node (i.e., the anchor point in the incoming direction) are: X-axis coordinate 400, Y-axis coordinate 820 + 80 / 2 = 860, i.e., (400, 860). The server regenerates the connection path between the text image node and the image super-resolution node based on the starting anchor coordinates (360, 340) and the ending anchor coordinates (400, 860), so that the starting point of the connection path is located at (360, 340) and the ending point is located at (400, 860).

[0057] If the server does not regenerate the connection path based on the updated position coordinates, the endpoint of the connection path will still be located at the left edge center point (400, 540) corresponding to the position coordinates of the image super-resolution node before the update. However, the image super-resolution node has actually moved to position 820 on the Y-axis, and its left edge center point has changed to (400, 860). This causes the endpoint of the connection path to mismatch with the actual node position, and the connection will detach from the node. Through the above regeneration operation, the endpoint of the connection path is updated to (400, 860), which is consistent with the position of the left edge center point of the image super-resolution node after its movement, and the connection between the connection path and the node maintains the correct connection state.

[0058] As can be seen, in this embodiment, by traversing each connection path, the updated position coordinates of the downstream node of the outgoing line and the downstream node of the incoming line are obtained respectively, and the connection path is regenerated based on these two coordinates. This ensures that all associated connections maintain the correct connection state with the node after the node moves, and the endpoint coordinates of the connection path match the updated position coordinates of the node, thus avoiding the connection from leaving the node or becoming misaligned.

[0059] In one embodiment, the process of regenerating the connection path between the outgoing downstream node and the incoming downstream node includes the following steps: S151A: Based on the first updated position coordinates, determine the outgoing direction of the downstream node and the coordinates of the first anchor point; S151B: Based on the updated position coordinates, determine the incoming direction of the downstream node and the coordinates of the second anchor point; S151C: Starting from the first anchor point coordinates and ending at the second anchor point coordinates, a third-order Bézier curve algorithm is used to generate the connecting path.

[0060] The first control point of the third-order Bézier curve is located on the ray that passes through the coordinates of the first anchor point and extends along the outgoing direction, while the second control point of the third-order Bézier curve is located on the ray that passes through the coordinates of the second anchor point and extends along the incoming direction.

[0061] As an example, the outgoing direction refers to the direction of the output end of the downstream node. In a typical workflow canvas layout, the output end of a node is usually located on the right edge of the node, so the outgoing direction is to the right. The incoming direction refers to the direction of the input end of the downstream node. In a typical workflow canvas layout, the input end of a node is usually located on the left edge of the node, so the incoming direction is to the left. The first anchor point coordinates refer to the coordinates of the endpoint of the connection path on the side of the outgoing downstream node, located at the center point of the right edge of the outgoing downstream node. The second anchor point coordinates refer to the coordinates of the endpoint of the connection path on the side of the incoming downstream node, located at the center point of the left edge of the incoming downstream node.

[0062] A third-order Bézier curve, defined by a start point, an end point, and two control points, is a commonly used algorithm for generating smooth curve paths connecting two anchor points. The first control point is located on a ray passing through the coordinates of the first anchor point and extending along the outgoing direction, specifically at a predetermined distance (e.g., 60 pixels) to the right from the first anchor point. The second control point is located on a ray passing through the coordinates of the second anchor point and extending along the incoming direction, specifically at a predetermined distance (e.g., 60 pixels) to the left from the second anchor point. By setting the control points on rays along either the outgoing or incoming directions, the connecting path is ensured to be tangent to the outgoing direction at the start point and tangent to the incoming direction at the end point, resulting in a smooth and fluid path without sharp angles.

[0063] In a specific example, the coordinates of the image node (outgoing downstream node) are (200, 300), with a width of 160 pixels and a height of 80 pixels. The coordinates of the image super-resolution node (incoming downstream node) are (400, 820), with a width of 160 pixels and a height of 80 pixels.

[0064] Based on the updated position coordinates (200, 300) of the Wensheng graph node, the server determines that the outgoing line direction of the Wensheng graph node is to the right (because the output end is located on the right edge of the node). The coordinates of the center point of the right edge of the Wensheng graph node are: X-axis coordinate is 200 + 160 = 360, Y-axis coordinate is 300 + 80 / 2 = 340, that is, the coordinates of the first anchor point are (360, 340).

[0065] Based on the updated position coordinates (400, 820) of the super-resolution node, the server determines that the incoming line direction of the super-resolution node is to the left (because the input end is located on the left edge of the node). The coordinates of the center point of the left edge of the super-resolution node are: X-axis coordinate 400, Y-axis coordinate 820 + 80 / 2 = 860, that is, the coordinates of the second anchor point are (400, 860).

[0066] The server uses a third-order Bézier curve algorithm to generate a connecting path, starting from the first anchor point (360, 340) and ending at the second anchor point (400, 860). The first control point is located on the ray passing through (360, 340) and extending to the right, 60 pixels from the starting point, with coordinates (420, 340). The second control point is located on the ray passing through (400, 860) and extending to the left, 60 pixels from the ending point, with coordinates (340, 860).

[0067] The server generates a third-order Bézier curve path based on the starting point (360, 340), the ending point (400, 860), the first control point (420, 340), and the second control point (340, 860). This curve path starts from the center point of the right edge of the image node (360, 340), extends smoothly to the right at the starting point, gradually turns after being pulled by the first control point (420, 340), and is pulled by the second control point (340, 860) near the ending point, finally smoothly entering the center point of the left edge of the image super-resolution node (400, 860) in the left direction.

[0068] If the server does not use the third-order Bézier curve algorithm to generate the connection path, but instead directly connects the coordinates of the first and second anchor points with a straight line, sharp angles may appear at the junction of the connection path and the node edges, resulting in a visually less smooth and fluid appearance. By using the third-order Bézier curve algorithm and setting the control points on rays extending along the outgoing and incoming directions, the connection path is ensured to be tangent to the outgoing and incoming directions at the start and end points, respectively, resulting in a smooth and natural connection without sharp angles.

[0069] As can be seen, in this embodiment, the coordinates of the first anchor point and the second anchor point are determined according to the updated position coordinates of the downstream nodes of the outgoing and incoming lines, respectively. The first anchor point coordinates are used as the starting point and the second anchor point coordinates are used as the ending point. The connection path is generated by the third-order Bézier curve algorithm, and the control points are set on the rays along the outgoing and incoming lines, so that the connection path is tangent to the outgoing and incoming lines at the starting and ending points, respectively. The connection is smooth and fluid without sharp corners, which improves the visual quality of the canvas connection.

[0070] In one embodiment, after updating the position coordinates of all downstream nodes based on the height change to obtain the updated position coordinates of each downstream node, the following steps are also included: S104A1: Obtain the rectangular regions of any two downstream nodes among all downstream nodes; S104A2: Detect whether there is an overlapping region between the rectangular regions of two downstream nodes; S104A3: When there is an overlapping region, determine the topology level to which the downstream node on the downstream side belongs; S104A4: Apply incremental displacement to all nodes in the topology level and all nodes in all downstream topology levels. The incremental displacement is along the Y-axis and the displacement amount is not less than the height value of the overlapping area along the Y-axis.

[0071] As an example, a rectangular region refers to the rectangular area occupied by a downstream node on the canvas, determined by the node's position coordinates in the canvas coordinate system and its size. An overlapping region is the portion where two rectangular regions intersect in both the horizontal and vertical directions; that is, the rectangular regions of the two nodes partially or completely overlap each other on the canvas. A downstream node is the node located relatively lower in the vertical direction (Y-axis direction), i.e., the node with the larger Y-axis coordinate value. Incremental displacement refers to the additional displacement applied after the offset update to eliminate overlapping regions. This displacement is along the positive Y-axis (downwards) and is used to move the downstream node and all nodes in its topology level downwards as a whole, thereby removing the overlap.

[0072] After updating the position coordinates of all downstream nodes, the server further checks for node overlap. The server obtains the rectangular regions of any two downstream nodes and checks if these regions intersect horizontally and vertically. If an overlapping region is detected, it indicates that the two nodes partially overlap the canvas, resulting in a layout conflict. The server determines the topology level of the downstream node (with the larger Y-axis coordinate value) among the two overlapping nodes. Then, it applies incremental displacement to all nodes in that topology level and all downstream topology levels (i.e., the levels with larger topology level numbers), moving the entire topology level and all downstream levels downwards by an amount not less than the height of the overlapping region along the Y-axis, until the overlapping region is completely eliminated.

[0073] In a specific example, in the workflow canvas, the downstream of the Wensheng graph node includes a first-level topology image super-resolution node (position coordinates (400, 620), width 160 pixels, height 80 pixels) and a second-level topology image editing node (position coordinates (400, 780), width 160 pixels, height 80 pixels). After the server completes the offset update, the rectangular area occupied by the image super-resolution node in the canvas is: top left vertex (400, 620), bottom right vertex (560, 700). The rectangular area occupied by the image editing node in the canvas is: top left vertex (400, 780), bottom right vertex (560, 860). The vertical spacing between the two nodes is 780-700=80 pixels. The preset safe spacing threshold is 40 pixels. The vertical spacing of 80 pixels is greater than 40 pixels, and there is no overlapping area.

[0074] In another specific example, due to a deviation in the calculation of the target offset for the preceding offset update, the coordinates of the image super-resolution node are (400, 620), and the coordinates of the image editing node are (400, 670). The rectangular region occupied by the image super-resolution node is: top left vertex (400, 620), bottom right vertex (560, 700). The rectangular region occupied by the image editing node is: top left vertex (400, 670), bottom right vertex (560, 750). The vertical intersection of the two rectangular regions is 670 to 700, and the height of the overlapping region along the Y-axis is 700-670=30 pixels. The server detects an overlapping region between the rectangular regions of the two nodes, with a height of 30 pixels along the Y-axis. The server determines that the downstream node of the two overlapping nodes is the image editing node (its Y-axis coordinate 670 is greater than the Y-axis coordinate 620 of the image super-resolution node), and the image editing node belongs to the second topology level. The server applies an incremental displacement of 40 pixels (not less than the overlapping area height of 30 pixels) to all nodes in the second topology level (i.e., the image editing node) and all nodes in all downstream topology levels (i.e., all levels below the second level; there are no other levels in this example). This updates the Y-axis coordinate of the image editing node from 670 to 670 + 40 = 710. After the update, the Y-axis coordinate of the bottom edge of the image super-resolution node is 620 + 80 = 700, and the Y-axis coordinate of the top edge of the image editing node is 710. The vertical distance between them is 710 - 700 = 10 pixels, which is still less than the preset safe distance threshold of 40 pixels. The server continues to apply incremental displacements until the vertical distance reaches 40 pixels, that is, the Y-axis coordinate of the image editing node is updated to 740 (700 + 40 = 740). At this time, the position coordinates of the image editing node are (400, 740).

[0075] If the server does not perform overlap detection and incremental displacement, the overlap between the image super-resolution node and the image editing node will cause the two nodes to partially overlap on the canvas. Part of the image editing node will be covered by the image super-resolution node, preventing the user from fully viewing the content of the image editing node. Furthermore, the overlapping area may cause subsequent connection operations to fail to correctly identify the input / output anchor point positions of the nodes, thus affecting the normal execution and editing of the workflow. By performing the aforementioned overlap detection and incremental displacement, the server eliminates the overlapping areas between nodes, ensuring that the rectangular areas of all downstream nodes on the canvas do not overlap, resulting in a neat and clear canvas layout, full visibility of each node, and no occlusion or misalignment of the connection paths between nodes due to node overlap.

[0076] As can be seen, in this embodiment, by detecting overlapping regions in all downstream nodes after completing the offset update, and applying incremental displacement to the topology level to which the downstream node belongs and all downstream topology levels, the node overlap problem that may remain after the offset update is eliminated. This ensures that the rectangular areas of all downstream nodes in the canvas do not overlap, the canvas layout is neat and clear, each node is fully visible, and the connection paths between nodes will not be obstructed or misaligned due to node overlap. At the same time, applying the same incremental displacement uniformly to the same topology level and all downstream topology levels ensures that the relative positions of nodes within the same level remain unchanged after the overlap is eliminated.

[0077] In one embodiment, after updating the position coordinates of all downstream nodes based on the height change to obtain the updated position coordinates of each downstream node, the following steps are also included: S104B1: Obtain the rectangular regions of any two downstream nodes among all downstream nodes; S104B2: Detects the vertical distance between rectangular regions of two downstream nodes; S104B3: When the vertical spacing is less than the preset safety spacing threshold, determine the topology level to which the downstream node located on the downstream side belongs; S104B4: Apply displacement to all nodes in the topology level and all nodes in all downstream topology levels. The displacement is along the Y-axis and the amount of displacement is the difference between the preset safety distance threshold and the vertical distance.

[0078] As an example, a rectangular area refers to the rectangular region occupied by a downstream node in the canvas, determined by the node's position coordinates in the canvas coordinate system and its size. Vertical spacing refers to the vertical distance between the rectangular areas of two downstream nodes, equal to the difference between the top Y-axis coordinate of the downstream node and the bottom Y-axis coordinate of the upstream node. The preset safe spacing threshold refers to the minimum vertical distance that adjacent downstream nodes must maintain in the canvas, such as 40 pixels. A downstream node is the node located relatively lower in the vertical direction (Y-axis direction), i.e., the node with the larger Y-axis coordinate value.

[0079] After updating the position coordinates of all downstream nodes, the server further checks whether the vertical spacing between adjacent downstream nodes meets the safety requirements. The server obtains the rectangular regions of any two downstream nodes and checks the vertical spacing between them. If the vertical spacing is less than a preset safety spacing threshold, it indicates that the nodes are too close together, which may affect the clarity and readability of the canvas layout. The server determines the topology level of the node located downstream (with a larger Y-axis coordinate value) and then applies displacement to all nodes in that topology level and all downstream topology levels (i.e., levels with larger topology level numbers). This displacement moves the entire topology level and all downstream levels downwards by the difference between the preset safety spacing threshold and the current vertical spacing, restoring the vertical spacing to the preset safety spacing threshold.

[0080] In a specific example, the downstream of the Wensheng graph node includes a first-level topological super-resolution node (position coordinates (400, 620), width 160 pixels, height 80 pixels), a second-level topological image editing node (position coordinates (400, 780), width 160 pixels, height 80 pixels), and a third-level topological content export node (position coordinates (400, 940), width 160 pixels, height 80 pixels). After the server completes the offset update, the rectangular area occupied by the image super-resolution node in the canvas is: top-left vertex (400, 620), bottom-right vertex (560, 700). The rectangular area occupied by the image editing node in the canvas is: top-left vertex (400, 780), bottom-right vertex (560, 860). The rectangular area occupied by the content export node in the canvas is: top-left vertex (400, 940), bottom-right vertex (560, 1020).

[0081] The server obtains the rectangular regions of the image super-resolution node and the image editing node, and detects the vertical spacing between them. The bottom edge Y-coordinate of the image super-resolution node is 620 + 80 = 700, and the top edge Y-coordinate of the image editing node is 780. The vertical spacing between them is 780 - 700 = 80 pixels. The preset safe spacing threshold is 40 pixels. Since 80 > 40, the spacing meets the requirement, and no spacing compensation is needed.

[0082] The server continues to detect the vertical spacing between the image editing node and the content exporting node. The bottom edge Y-coordinate of the image editing node is 780 + 80 = 860, and the top edge Y-coordinate of the content exporting node is 940. The vertical spacing between them is 940 - 860 = 80 pixels. The preset safe spacing threshold is 40 pixels. Since 80 > 40, the spacing meets the requirements, and no spacing compensation is needed.

[0083] In another specific example, due to a deviation in the calculation of the target offset for the preceding offset update, the coordinates of the image super-resolution node are (400, 620), the coordinates of the image editing node are (400, 690), and the coordinates of the content export node are (400, 830). The rectangular area occupied by the image super-resolution node is: top left vertex (400, 620), bottom right vertex (560, 700). The rectangular area occupied by the image editing node is: top left vertex (400, 690), bottom right vertex (560, 770). The rectangular area occupied by the content export node is: top left vertex (400, 830), bottom right vertex (560, 910).

[0084] The server detects the vertical distance between the image super-resolution node and the image editing node. The bottom edge Y-coordinate of the image super-resolution node is 620 + 80 = 700, and the top edge Y-coordinate of the image editing node is 690. The vertical distance between them is 690 - 700 = -10 pixels (a negative value indicates that the two nodes overlap vertically, with an overlap height of 10 pixels). The preset safe distance threshold is 40 pixels. The server detects that -10 < 40, determining that the vertical distance is less than the preset safe distance threshold. The server determines that the downstream node is the image editing node (its Y-coordinate 690 is greater than the Y-coordinate 620 of the image super-resolution node), and the image editing node belongs to the second topology level. The server applies a displacement to all nodes in the second topology level (i.e., the image editing node) and all nodes in all downstream topology levels (i.e., the content export nodes in the third level). The displacement is 40 - (-10) = 50 pixels, which means that the Y-coordinates of the image editing node and the content export node are uniformly increased by 50 pixels. The Y-axis coordinate of the image editing node was updated from 690 to 690+50=740, and the Y-axis coordinate of the content export node was updated from 830 to 830+50=880.

[0085] After the update, the bottom edge Y-coordinate of the image super-resolution node is 620+80=700, and the top edge Y-coordinate of the image editing node is 740. The vertical distance between them is 740-700=40 pixels, which meets the preset safe distance threshold of 40 pixels. The bottom edge Y-coordinate of the image editing node is 740+80=820, and the top edge Y-coordinate of the content export node is 880. The vertical distance between them is 880-820=60 pixels, which is greater than the preset safe distance threshold of 40 pixels, thus meeting the safety requirements. The vertical distance between the image editing node and the content export node changes from 830-(740+80)=830-820=10 pixels to 880-820=60 pixels, and the incremental displacement of 50 pixels also increases this distance by 50 pixels.

[0086] Without safety spacing verification and compensation, the vertical spacing between the image super-resolution node and the image editing node is -10 pixels (overlapping), and the vertical spacing between the image editing node and the content export node is 830-(690+80)=830-770=60 pixels (meeting safety requirements). However, the overlap between the image super-resolution node and the image editing node will cause the two nodes to partially cover each other on the canvas, with part of the image editing node being covered by the image super-resolution node. Users will not be able to fully view the content of the image editing node, and the overlapping area may cause subsequent connection operations to fail to correctly identify the input anchor point position of the node. By performing the above safety spacing verification and compensation, the server will move the topology level to which the downstream node belongs and all downstream topology levels downward as a whole, so that the vertical spacing between adjacent downstream nodes is restored to the preset safety spacing threshold, while ensuring that the relative positions between nodes in the same topology level and all downstream topology levels remain unchanged after compensation.

[0087] As can be seen, in this embodiment, by detecting the vertical spacing between adjacent downstream nodes after offset update, and applying a compensation displacement uniformly to the topology level to which the downstream node belongs and all downstream topology levels when the spacing is less than a preset safe spacing threshold, the vertical spacing between all adjacent downstream nodes reaches or exceeds the preset safe spacing threshold, ensuring the clarity and readability of the canvas layout and avoiding visual crowding and operational inconvenience caused by excessively close node spacing. Simultaneously, applying the same compensation displacement uniformly to the same topology level and all downstream topology levels ensures that the relative positions of nodes within that level and all downstream levels remain unchanged after compensation.

[0088] In one embodiment, determining the current display state of the target display area corresponding to the functional node includes the following steps: S111: Get the status identifier corresponding to the functional node. The status identifier is stored in the node attribute data of the functional node. S112: When the status identifier is the first value, the current display status is determined to be the expanded state; S113: When the status identifier is the second value, the current display status is determined to be the collapsed status; The target display state is the opposite of the current display state.

[0089] As an example, a status identifier is an identifier stored in the node attribute data of a functional node, used to characterize the current display state of the target display area. Node attribute data is a data structure maintained by the functional node in the canvas, used to store various attribute information of the node, including node position, node size, node type, and status identifier. The first value, such as "1", indicates an expanded state; the second value, such as "0", indicates a collapsed state. An expanded state means the target display area is fully expanded and the output nodes are visible; a collapsed state means the target display area is fully collapsed and the output nodes are not visible. The target display state refers to the state that the target display area should present after this state switch. Since the display state switch event triggers a reverse state switch (the user clicks the "Generate Result" button to switch the current display state to the opposite state), the target display state is determined to be the opposite of the current display state.

[0090] When the server performs a display state switching operation, it first reads the state identifier from the node attribute data of the functional node, and then determines the current display state of the target display area based on the value of the state identifier. When the state identifier is the first value (e.g., "1"), the server determines that the current display state is expanded, and thus determines that the target display state is the opposite of expanded, collapsed. When the state identifier is the second value (e.g., "0"), the server determines that the current display state is collapsed, and thus determines that the target display state is the opposite of collapsed, expanded.

[0091] In a specific example, the user clicks the "Generate Result" button in the upper right corner of the text graph node. The server reads the status identifier from the node attribute data of that text graph node, and the value of this status identifier is "0". According to a preset rule, the server determines that the second value "0" corresponds to the collapsed state, and therefore determines the current display state to be the collapsed state. Since the target display state is the opposite of the current display state, the server determines the target display state to be the expanded state.

[0092] In another specific example, when the user clicks the "Generate Result" button in the upper right corner of the text image node again, the server reads the status identifier from the node attribute data of that text image node. The value of this status identifier is "1". According to preset rules, the server determines that the first value "1" corresponds to the expanded state, and therefore determines that the current display state is the expanded state. Since the target display state is the opposite of the current display state, the server determines that the target display state is the collapsed state.

[0093] As can be seen, in this embodiment, by storing state identifiers in the node attribute data of functional nodes and determining the current display state based on the value of the state identifiers, the persistence and accessibility of state information are guaranteed, and the server can accurately identify the current state of the target display area at any time. By determining the target display state as the opposite of the current display state, the logic for judging the direction of state switching is simple and clear, and the target direction of this switch can be determined without additional condition judgment, providing an accurate basis for the subsequent calculation of height change.

[0094] In one embodiment, the following steps are also included: S201: After performing offset updates on the position coordinates of all downstream nodes to obtain the updated position coordinates of each downstream node, update the status identifier to the value corresponding to the target display status.

[0095] As an example, the status identifier needs to be synchronized with the actual display state of the target display area. After the server completes the position coordinate offset update of all downstream nodes, it updates the value of the status identifier to the value corresponding to the target display state (the first value corresponds to the expanded state, and the second value corresponds to the collapsed state). Since this operation has switched the actual display state of the target display area to the target display state, the status identifier must be updated synchronously to reflect this change; otherwise, the status identifier read in subsequent operations will be inconsistent with the actual state, leading to status recognition errors.

[0096] In a specific example, the status identifier of the Wensheng graph node is currently set to "0" (indicating a collapsed state). After the user clicks the "Generate Results" button, the target display state is expanded. After the server completes the position coordinate offset update of all downstream nodes, it updates the status identifier from "0" to "1" (the first value corresponding to the expanded state), ensuring that the status identifier is consistent with the actual display state of the target display area.

[0097] In another specific example, the status identifier of the Wensheng graph node is currently set to "1" (indicating an expanded state). After the user clicks the "Generate Results" button, the target display state is collapsed. After the server completes the position coordinate offset update of all downstream nodes, it updates the status identifier from "1" to "0" (the second value corresponding to the collapsed state), ensuring that the status identifier is consistent with the actual display state of the target display area.

[0098] As can be seen, in this embodiment, by synchronously updating the status identifier to the value corresponding to the target display state after completing the downstream node position offset update, the status identifier is kept consistent with the actual display state of the target display area. This avoids the problem of incorrect state recognition in subsequent operations due to the inconsistency between the status identifier and the actual state, and ensures that the direction judgment of subsequent expand / collapse operations is accurate and reliable.

[0099] In one embodiment, the following steps are also included: S301: Monitor the running status of the functional node; S302: When the successful execution of a function node is detected, obtain the execution result of the function node; S303: Based on the running results, create an artifact node associated with the functional node and assign a version number to the artifact node. The version number increases with the number of times the functional node is run. S304: Render the product node in the target display area corresponding to the function node.

[0100] As an example, "Running Status" refers to the execution status of a functional node, including running, running successfully, and running failed. "Product Node" refers to a visual output unit created based on the functional node's execution result, used to display the content generated by the functional node on the canvas. "Execution Result" refers to the content data output after the functional node completes execution, such as one or more images generated after the text-to-image node is executed, or a piece of text generated after the text-to-image node is executed. "Version Number" is a number used to identify the version sequence of the product node, incrementing with the number of times the functional node is executed. For example, the version number is 1 when the functional node runs successfully for the first time, 2 when it runs successfully for the second time, and so on. "Target Display Area" refers to the dedicated visual rectangular area reserved below the functional node, used to hold the corresponding product node.

[0101] The server continuously monitors the running status of all functional nodes within the canvas. When a functional node is detected as having run successfully, the server retrieves the result, including the content type (e.g., image, text, video) and content data (e.g., image file, text content). Based on the result, the server creates one or more artifact nodes, each associated with a functional node. The server assigns a version number to each artifact node, determined by the historical run count of the functional node (e.g., incrementing the historical run count by 1 to obtain the current version number). The server renders the created artifact nodes in the target display area corresponding to the functional node, allowing users to see the generated content below the functional node.

[0102] In a specific example, the Wensheng graph node has a history of 0 runs (it has not been run yet). When a user clicks the "Run" button on the Wensheng graph node, it triggers execution, and the node begins running. The server listens for the node's running status changing to "Running" and continues listening until completion. The Wensheng graph node runs successfully, outputting a PNG image stored on the server at " / output / img_001.png". The server listens for the node's running status changing to "Running Successfully," retrieves the result, and finds that the result's content type is "Image Type," and the content data is the image file " / output / img_001.png".

[0103] The server creates an image output node based on the execution results. This output node's attributes include: a globally unique identifier "prod_001", a related functional node identifier "node_003", an output type "image / png", a content storage address " / output / img_001.png", and a version number of 1 (obtained by adding 1 to the historical execution count from 0). The server binds the node identifier "node_003" of the text-based image node to the globally unique identifier "prod_001" of the output node, establishing a relationship. The server renders the image output node in the target display area below the text-based image node as a 120-pixel × 120-pixel thumbnail, which users can see below the text-based image node.

[0104] As can be seen, in this embodiment, by monitoring the running status of functional nodes, the running results are automatically obtained after the functional node runs successfully, and associated product nodes are created. Product nodes are assigned version numbers that increase with the number of runs, and the product nodes are rendered in the target display area corresponding to the functional node. This realizes the automatic conversion of functional node execution results into canvas visualization content, without requiring users to manually create display elements, thus improving workflow building efficiency. At the same time, the incremental allocation of version numbers provides a data foundation for subsequent product version management and differentiation between new and old products.

[0105] In one embodiment, after rendering the product node in the target display area corresponding to the function node, the following steps are further included: S305: Calculate the initial height of the target display area based on the number and size of the product nodes.

[0106] As an example, the number of artifact nodes refers to the total number of artifact nodes generated and associated with a function node after its successful execution. The size of an artifact node refers to the width and height of each artifact node when displayed as a thumbnail within the target display area, for example, 120 pixels × 120 pixels. The initial height of the target display area refers to the vertical dimension required to fully display all artifact nodes after the initial rendering of the target display area; that is, the initial height of the artifact display area.

[0107] After rendering the product nodes onto the target display area, the server obtains the total number of all product nodes currently associated with the functional node, as well as the preset thumbnail size (width and height) of each product node. It also obtains the system's preset horizontal and vertical spacing, and the inner margin within the display area. Based on the number of product nodes, thumbnail size, and layout parameters, the server calculates the initial height of the target display area. The calculation logic is as follows: Maximum number of nodes per row = Target display area width / (Thumbnail width + Horizontal spacing) (rounded down), Number of rows = Total number of product nodes / Maximum number of nodes per row (rounded up), Initial height = Number of rows × (Thumbnail height + Vertical spacing) + Inner margin.

[0108] In a specific example, the Wensheng image node successfully ran for the first time, generating 5 image output nodes. Each output node has a preset thumbnail size of 120 pixels wide and 120 pixels high, with a horizontal spacing of 16 pixels, a vertical spacing of 16 pixels, a margin of 20 pixels within the display area, and a target display area width of 400 pixels. After obtaining these parameters, the server calculates the maximum number of rows as ⌊400 / (120+16)⌋=⌊400 / 136⌋=2 (rounded down), the number of rows as ⌈5 / 2⌉=3 (rounded up), and the initial height as 3×(120+16)+20=3×136+20=408+20=428 pixels. The server sets the initial height of the target display area to 428 pixels, so that the 5 product nodes are fully displayed in the display area in a layout of 2 per row, for a total of 3 rows. Each row is 136 pixels high (120 pixels for thumbnail height plus 16 pixels for vertical spacing), plus 20 pixels for inner margin, for a total height of 428 pixels.

[0109] As can be seen, in this embodiment, the initial height of the target display area is calculated based on the number of product nodes, thumbnail size, layout spacing and inner margin, providing accurate initial height reference data for subsequent expand / collapse operations. This ensures that the height of the product display area can just accommodate all product nodes, preventing product nodes from being clipped due to insufficient height or canvas space from being wasted due to excessive height.

[0110] In one embodiment, after rendering the product node in the target display area corresponding to the function node, the following steps are further included: S306: When a function node runs successfully for the first time, set the display state of the target display area to the expanded state.

[0111] As an example, "first run successful" refers to the first successful execution and output of a result after a function node is created. For instance, if a user creates a new text image node in the workflow canvas, and this node has not yet performed any operations, and the user then triggers the node to execute and successfully generates an image, this run is considered a "first run successful." "Expanded state" means that the target display area is in an expanded state, i.e., the product display area is fully visible, and the area height is the height value required to fully display all product nodes.

[0112] After a functional node successfully runs for the first time and renders the product node in the target display area, the server checks whether the functional node has run successfully for the first time. The server can determine this by reading the historical run count of the functional node: if the historical run count is 0 (i.e., the node has never run successfully before), then the current run is considered a successful first run. When it is determined to be a successful first run, the server sets the display status of the target display area to the expanded state, causing the product display area to expand automatically, so that the user can see the generated product content without manually clicking the "Generate Results" button.

[0113] In a specific example, a user creates a new texturing image node in the workflow canvas, a node that has never been run before. The user clicks the "Run" button on this node to trigger execution, and the texturing image node runs successfully, generating three image artifacts. After the server detects the successful execution, it creates the three image artifact nodes and renders them in the target display area below the texturing image node. The server reads that the texturing image node's historical run count is 0, confirming that this run is its first successful execution. The server sets the display state of the target display area of ​​the texturing image node to expanded, and the artifact display area of ​​the target display area automatically expands. The user can directly see thumbnails of the three image artifacts below the texturing image node without needing to click the "Generate Results" button.

[0114] As can be seen, in this embodiment, by automatically setting the display state of the target display area to the expanded state when the functional node runs successfully for the first time, the user can immediately see the product display content when the functional node generates the product for the first time, without having to manually click the expand button. This reduces the user's operation steps, improves the user experience, and provides the user with immediate visual feedback on the execution result of the functional node.

[0115] In one embodiment, after updating the position coordinates of all downstream nodes based on the height change to obtain the updated position coordinates of each downstream node, the following steps are also included: S104C1: Get the updated position coordinates of the node that is the most downstream in the vertical direction among all downstream nodes; S104C2: Determine the maximum distribution range of all downstream nodes in the Y-axis direction based on the updated position coordinates of the downstream node. S104C3: Get the visible area of ​​the canvas in the Y-axis direction; S104C4: When the maximum distribution range exceeds the visible range, adjust the viewport position or scaling ratio of the visible area of ​​the canvas so that the functional node and the downstream node of the first topology level of the functional node are within the visible range.

[0116] As an example, the downstream node refers to the node with the largest Y-axis coordinate value among all downstream nodes, i.e., the node located at the bottom of all downstream nodes. The maximum distribution range refers to the maximum range occupied by all downstream nodes in the Y-axis direction, from the smallest Y-axis coordinate (i.e., the top Y-axis coordinate of the upstream downstream node) to the largest Y-axis coordinate (i.e., the bottom Y-axis coordinate of the downstream node). The canvas visible area refers to the boundary of the display area currently visible to the user on the canvas, having a visible range in the Y-axis direction, defined by the top and bottom Y-axis coordinates of the visible area. The viewport position refers to the position of the canvas visible area in the canvas coordinate system; adjusting the viewport position translates the display range of the visible area on the canvas. The scaling factor refers to the scaling factor of the canvas content display; adjusting the scaling factor enlarges or reduces the display size of the canvas content.

[0117] After updating the position coordinates of all downstream nodes, the server further checks whether the canvas layout exceeds the current visible area. The server obtains the updated position coordinates of the lowest vertical node among all downstream nodes. Based on the position coordinates and size of this lowest node, it determines the maximum distribution range of all downstream nodes along the Y-axis (from the top Y-axis coordinate of the highest downstream node to the bottom Y-axis coordinate of the lowest downstream node). The server also obtains the visible range of the canvas's visible area along the Y-axis (from the top boundary to the bottom boundary of the visible area). When the maximum distribution range exceeds the visible range, it indicates that some downstream nodes are outside the current visible area, and the user needs to manually drag or zoom to view the complete canvas layout. The server automatically adjusts the viewport position or scaling of the canvas's visible area to ensure that functional nodes and their first-level downstream nodes are within the visible range, guaranteeing that the user can see the core workflow without manual operation.

[0118] In practice, when the maximum distribution range exceeds the visible range, the server first calculates the position coordinates of the functional node and the position coordinates of the downstream node in the first topology level to determine the minimum area that needs to be included in the visible range (i.e., from the top of the functional node to the bottom of the downstream node in the first topology level). Then, the server obtains the current visible range and calculates the required displacement or scaling. If the viewport position adjustment method is used, the server shifts the top boundary of the visible area upwards or downwards, ensuring that the top of the functional node and the bottom of the downstream node in the first topology level are both within the visible range. If the scaling method is used, the server shrinks the canvas content to a suitable scale, ensuring that both the functional node and the downstream node in the first topology level appear simultaneously within the visible range.

[0119] In a specific example, after the expansion operation is completed, the position coordinates of the text graph node are (200, 300), and the position coordinates of the image super-resolution node, a downstream node in the first topology level, are (400, 820). The Y-axis coordinates of both are between 300 and 820. The downstream node, located at the very bottom vertically, is the video editing node in the third topology level, with position coordinates of (400, 1100), a node height of 80 pixels, and a bottom edge Y-axis coordinate of 1100 + 80 = 1180. The maximum distribution range of all downstream nodes in the Y-axis direction is from 300 to 1180. The visible area of ​​the canvas in the Y-axis direction is from 0 to 700 (i.e., the top of the visible area is 0, and the bottom is 700). The maximum distribution range of 1180 exceeds the visible area of ​​700; the Y-axis coordinates of the text graph node (300) and the image super-resolution node (820) are both outside the visible area.

[0120] The server obtains the position coordinates (200, 300) of the functional node (texture graph node) and the position coordinates (400, 820) of the downstream node (image super-resolution node) in the first topology layer, and determines that the minimum area to be included in the visible range is from 300 to 820. The server obtains the current visible range (0-700) and calculates the distance that the visible range needs to be shifted downwards: In order to include the texture graph node (Y-axis coordinate 300) in the visible range, the top of the visible range needs to be shifted down to 300 or above; in order to include the image super-resolution node (bottom Y-axis coordinate 820+80=900) in the visible range, the bottom of the visible range needs to reach 900 or above. The server shifts the viewport position of the canvas's visible area downwards from (0, 0) to (0, 250), changing the top of the visible area from 0 to 250 and the bottom from 700 to 950. At this point, the top (300) of the text image node is located within the visible area (250≤300≤950), and the bottom (900) of the image super-resolution node is also located within the visible area (250≤900≤950). Users can see the complete layout of the text image node and the image super-resolution node without manually dragging the canvas.

[0121] As can be seen, in this embodiment, by obtaining the updated position coordinates of the downstream node after completing the offset update and determining the maximum distribution range of all downstream nodes, when the maximum distribution range exceeds the visible range of the canvas, the viewport position or scaling ratio is automatically adjusted so that the functional node and the downstream node of the first topology level are within the visible range. This avoids the user having to manually drag the canvas to adjust the viewing angle, thus improving the smoothness and consistency of the user's operation experience.

[0122] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0123] It should be noted that the specific values ​​mentioned in the above embodiments are merely exemplary values ​​set for the convenience of describing and understanding this embodiment, and do not constitute a limitation on the scope of protection of this application, nor do they constitute actual circumstances.

[0124] Secondly, embodiments of this application provide a node position adjustment device, which corresponds one-to-one with the node position adjustment method in the above embodiments. For example... Figure 3 As shown, the node position adjustment device includes a first determining module 401, a second determining module 402, an acquiring module 403, a first updating module 404, and a second updating module 405. Detailed descriptions of each functional module are as follows: The first determining module 401 is used to determine the current display state of the target display area corresponding to the function node in response to the display state switching event that triggers the function node; The second determining module 402 is used to determine the target display state of the target display area based on the current display state, and to calculate the height change of the target display area when it switches from the current display state to the target display state. The acquisition module 403 is used to acquire all downstream nodes in the canvas that are located downstream of the functional node; The first update module 404 is used to perform offset update on the position coordinates of all the downstream nodes according to the height change, so as to obtain the updated position coordinates of each downstream node. The second update module 402 is used to update the connection path between the downstream nodes according to the updated position coordinates of each downstream node.

[0125] In one embodiment, the second determining module 402 is further configured to: When the current display state is collapsed and the target display state is expanded, the expanded height corresponding to the target display area is obtained, and the expanded height is used as the height change amount, which is a positive value. When the current display state is expanded and the target display state is collapsed, the current height of the target display area is obtained, and the current height is used as the height change amount, which is a negative value.

[0126] In one embodiment, the acquisition module 403 is further configured to: Starting from the functional node, a graph traversal is performed in the directed acyclic graph corresponding to the canvas using a preset search algorithm to obtain all nodes reachable from the starting node, which are then used as the downstream nodes. The preset search algorithm includes a breadth-first search algorithm or a depth-first search algorithm.

[0127] In one embodiment, the first update module 404 is further configured to: The height change is used as the target offset. All downstream nodes are divided into N topological levels in the direction from upstream to downstream, where N≥1; wherein, the nodes of the first topological level are nodes that have a direct directed edge with the functional nodes; the nodes of the i-th topological level are nodes that have a direct directed edge with the nodes of the (i-1)-th topological level and do not belong to any of the topological levels from the 1st to the (i-1)th topological level, where 2≤i≤N. Following the order of the topological hierarchy, starting from the first topological hierarchy, offset updates are performed level by level to obtain the updated position coordinates of each downstream node; Specifically, when performing the offset update of the current topology level, the following operations are performed in parallel on each downstream node within the current topology level: Add the current Y-axis coordinate value of the downstream node to the target offset to obtain the updated Y-axis coordinate value of the downstream node; Keep the X-axis coordinate value of the downstream node unchanged from the current X-axis coordinate value; The updated Y-axis coordinate and the current X-axis coordinate of the downstream node are used as the updated position coordinates of the downstream node.

[0128] In one embodiment, the second update module 402 is further configured to: For each of the aforementioned connection paths: The updated position coordinates of the downstream node of the connection path are obtained as the first updated position coordinates; Obtain the updated position coordinates of the downstream node of the connection path as the second updated position coordinates; Based on the first updated position coordinates and the second updated position coordinates, the connection path between the outgoing downstream node and the incoming downstream node is regenerated to update the connection path between each downstream node.

[0129] In one embodiment, the first determining module 401 is further configured to: Obtain the status identifier corresponding to the functional node, and store the status identifier in the node attribute data of the functional node; When the status identifier is the first value, the current display state is determined to be the expanded state; When the status identifier is the second value, the current display state is determined to be the collapsed state; The target display state is the opposite of the current display state.

[0130] In one embodiment, the node position adjustment device further includes a detection module (not shown in the figure); The detection module is used for: Obtain the rectangular regions of any two downstream nodes from all the downstream nodes; Detect whether there is an overlapping area between the rectangular regions of the two downstream nodes; When the overlapping region exists, determine the topology level to which the downstream node located on the downstream side of the two downstream nodes belongs; An incremental displacement is applied to all nodes in the topology level and all nodes in all downstream topology levels. The incremental displacement is along the Y-axis and the displacement amount is not less than the height value of the overlapping region along the Y-axis.

[0131] It should be noted that, in order to avoid redundancy, the embodiments of this application only list some steps of the node position adjustment method described in the first aspect above, and do not list all the steps of the node position adjustment method in the second aspect embodiments.

[0132] It should be understood that the node position adjustment device in the second aspect embodiment can implement all the steps of the node position adjustment method in the first aspect embodiment described above, and will not be repeated here.

[0133] Specific limitations regarding the node position adjustment device can be found in the limitations of the node position adjustment method described above, and will not be repeated here. Each module in the aforementioned node position adjustment device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in the processor of the electronic device in hardware form or independently of it, or stored in the memory of the electronic device in software form, so that the processor can call and execute the operations corresponding to each module.

[0134] Thirdly, embodiments of this application provide an electronic device whose internal structure diagram can be as follows: Figure 4 As shown, the electronic device includes a processor, memory, network interface, and database connected via a system bus. The processor provides computing and control capabilities. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores the operating system, computer programs, and database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The database stores data required to execute the node position adjustment method. The network interface communicates with external terminals via a network connection. When the computer program is executed by the processor, it implements the steps of the node position adjustment method described above.

[0135] In one embodiment, this application provides an electronic device including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the steps of the node position adjustment method described in the first aspect above.

[0136] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the steps of the node position adjustment method described in the first aspect above.

[0137] It should be noted that the functions or steps that can be implemented by the computer-readable storage medium or electronic device described above can be referred to the relevant descriptions in the foregoing method embodiments. To avoid repetition, they will not be described one by one here.

[0138] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), Rambus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0139] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0140] 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, and should all be included within the protection scope of this application.

Claims

1. A method for adjusting node positions, characterized in that, include: In response to the display state switching event of the triggered functional node, determine the current display state of the target display area corresponding to the functional node; Based on the current display state, determine the target display state of the target display area, and calculate the height change of the target display area when switching from the current display state to the target display state; Obtain all downstream nodes in the canvas that are downstream of the functional node; Based on the height change, the position coordinates of all downstream nodes are updated by offset, resulting in the updated position coordinates of each downstream node. Update the connection paths between the downstream nodes based on their updated position coordinates.

2. The method according to claim 1, characterized in that, The calculation of the height change of the target display area when switching from the current display state to the target display state includes: When the current display state is collapsed and the target display state is expanded, the expanded height corresponding to the target display area is obtained, and the expanded height is used as the height change amount. When the current display state is expanded and the target display state is collapsed, the current height of the target display area is obtained, and the current height is used as the height change amount.

3. The method according to claim 1, characterized in that, The step of obtaining all downstream nodes in the canvas that are downstream of the functional node includes: Starting from the functional node, a graph traversal is performed in the directed acyclic graph corresponding to the canvas using a preset search algorithm to obtain all nodes reachable from the starting node, which are then used as the downstream nodes. The preset search algorithm includes a breadth-first search algorithm or a depth-first search algorithm.

4. The method according to claim 1, characterized in that, The step of updating the position coordinates of all downstream nodes based on the height change to obtain the updated position coordinates of each downstream node includes: The height change is used as the target offset. All downstream nodes are divided into N topological levels in the direction from upstream to downstream, where N≥1; wherein, the nodes of the first topological level are nodes that have a direct directed edge with the functional nodes; the nodes of the i-th topological level are nodes that have a direct directed edge with the nodes of the (i-1)-th topological level and do not belong to any of the topological levels from the 1st to the (i-1)th topological level, where 2≤i≤N. Following the order of the topological hierarchy, starting from the first topological hierarchy, offset updates are performed level by level to obtain the updated position coordinates of each downstream node; Specifically, when performing the offset update of the current topology level, the following operations are performed in parallel on each downstream node within the current topology level: Add the current Y-axis coordinate value of the downstream node to the target offset to obtain the updated Y-axis coordinate value of the downstream node; Keep the X-axis coordinate value of the downstream node unchanged from the current X-axis coordinate value; The updated Y-axis coordinate and the current X-axis coordinate of the downstream node are used as the updated position coordinates of the downstream node.

5. The method according to claim 1, characterized in that, The step of updating the connection path between the downstream nodes based on the updated position coordinates of each downstream node includes: For each of the aforementioned connection paths: The updated position coordinates of the downstream node of the connection path are obtained as the first updated position coordinates; Obtain the updated position coordinates of the downstream node of the connection path as the second updated position coordinates; Based on the first updated position coordinates and the second updated position coordinates, the connection path between the outgoing downstream node and the incoming downstream node is regenerated to update the connection path between each downstream node.

6. The method according to claim 1, characterized in that, Determining the current display state of the target display area corresponding to the functional node includes: Obtain the status identifier corresponding to the functional node, and store the status identifier in the node attribute data of the functional node; When the status identifier is the first value, the current display state is determined to be the expanded state; When the status identifier is the second value, the current display state is determined to be the collapsed state; The target display state is the opposite of the current display state.

7. The method according to any one of claims 1 to 6, characterized in that, After updating the position coordinates of all downstream nodes based on the height change to obtain the updated position coordinates of each downstream node, the method further includes: Obtain the rectangular regions of any two downstream nodes from all the downstream nodes; Detect whether there is an overlapping area between the rectangular regions of the two downstream nodes; When the overlapping region exists, determine the topology level to which the downstream node located on the downstream side of the two downstream nodes belongs; An incremental displacement is applied to all nodes in the topology level and all nodes in all downstream topology levels. The incremental displacement is along the Y-axis and the displacement amount is not less than the height value of the overlapping region along the Y-axis.

8. A node position adjustment device, characterized in that, include: The first determining module is used to determine the current display state of the target display area corresponding to the function node in response to the display state switching event that triggers the function node; The second determining module is used to determine the target display state of the target display area based on the current display state, and to calculate the height change of the target display area when it switches from the current display state to the target display state. The acquisition module is used to acquire all downstream nodes in the canvas that are located downstream of the functional node; The first update module is used to perform offset update on the position coordinates of all the downstream nodes according to the height change, so as to obtain the updated position coordinates of each downstream node. The second update module is used to update the connection path between the downstream nodes according to the updated position coordinates of each downstream node.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the node position adjustment method as described in any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the steps of the node position adjustment method as described in any one of claims 1 to 7.

Images