Workflow canvas-based node connection processing method, device, equipment and medium
Patent Information
- Application Number
- CN202611053381.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2026-07-15
- Publication Date
- 2026-11-03
AI Technical Summary
现有工作流画布系统在用户需要在已有节点左侧补充前置节点时,无法提供定向添加入口,导致节点定位与连线建立依赖手动操作,导致工作流搭建效率低。
The first and second addition entry points are rendered on both sides of the current node to trigger the upstream and downstream node addition process. The node attribute information is obtained according to the trigger operation, a candidate node list is generated, and the target node is automatically created and a connection is established on the corresponding side.
With automated node addition and connection establishment, users can complete targeted addition and connection in just one step, eliminating the need for manual drag-and-drop positioning and connection establishment. This significantly simplifies workflow setup steps and improves workflow setup efficiency.
Smart Images

Figure CN123030171A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the fields of workflow canvas technology and node processing technology, and in particular to a method, apparatus, device and medium for processing node connections based on workflow canvas. Background Technology
[0002] In a workflow canvas, the connections between nodes represent the dependencies between upstream and downstream data flows. Users build workflows by adding nodes and establishing connections in the canvas. Existing canvas products typically provide an entry point for adding downstream nodes to the right of functional nodes. After the user clicks on it, the system creates a new node to the right of the target node and automatically establishes a connection.
[0003] However, when users need to add a preceding node to the left of an existing node, such as adding a text polishing node upstream of an image generation node, the current system does not support adding an entry point to the left. Users can only create the node anywhere on the canvas, then manually drag and drop it to the left of the target node, and then manually establish the connection. In this process, node positioning and connection establishment rely entirely on manual operation by the user, which is cumbersome and results in low workflow setup efficiency, especially in scenarios where the workflow requires frequent iterations and adjustments. Therefore, improving workflow setup efficiency is an urgent problem to be solved. Summary of the Invention
[0004] Based on this, this application provides a node connection processing method, apparatus, device and medium based on workflow canvas to solve the problem that the existing workflow canvas only supports adding downstream nodes in one direction, which leads to the need to manually complete node positioning and connection when adding preceding nodes on the left, resulting in low workflow building efficiency.
[0005] In a first aspect, embodiments of this application provide a node connection processing method based on a workflow canvas, including: The first add entry and the second add entry are rendered on both sides of the current node, respectively. The first add entry is used to trigger the add process of the upstream node, and the second add entry is used to trigger the add process of the downstream node. In response to a trigger operation targeting the first or second add entry point, obtain the node attribute information of the current node; Based on the entry direction corresponding to the triggering operation and the node attribute information, a candidate node list is generated; In response to a selection operation for a target node in the candidate node list, the target node is created on the corresponding side of the current node; wherein, when the triggering operation is to trigger the first add entry, the corresponding side is the left side, and when the triggering operation is to trigger the second add entry, the corresponding side is the right side; Based on the direction of the added entry, establish a connection between the current node and the target node.
[0006] Secondly, embodiments of this application provide a node connection processing device based on a workflow canvas, comprising: The rendering module is used to render the first addition entry and the second addition entry on both sides of the current node, respectively. The first addition entry is used to trigger the upstream node addition process, and the second addition entry is used to trigger the downstream node addition process. The acquisition module is used to acquire the node attribute information of the current node in response to a trigger operation for the first add entry or the second add entry; The generation module is used to generate a candidate node list based on the entry direction corresponding to the triggering operation and the node attribute information; A creation module is configured to create the target node on the corresponding side of the current node in response to a selection operation for a target node in the candidate node list; wherein, when the triggering operation is to trigger the first add entry, the corresponding side is the left side, and when the triggering operation is to trigger the second add entry, the corresponding side is the right side; A module is established to create a connection between the current node and the target node based on the direction of the added entry.
[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. When the processor executes the computer program, it implements the steps of the above-described workflow canvas-based node connection processing 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 workflow canvas-based node connection processing method.
[0009] Based on this, the beneficial effects of a technical solution provided in this application embodiment are as follows: by rendering a first add entry for triggering the upstream add process and a second add entry for triggering the downstream add process on both sides of the current node, after the user clicks the add entry on the corresponding side according to the add requirements, the system automatically creates the target node on the corresponding side according to the direction of the add entry and establishes the connection in the corresponding direction. This allows the user to complete the directional addition and automatic connection of the node in just one step, without having to manually drag and drop to position and manually establish the connection. This significantly simplifies the operation steps of workflow construction and improves the efficiency of workflow construction. 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 connection processing method in one embodiment of this application; Figure 2 This is a flowchart illustrating a node connection processing method in one embodiment of this application; Figure 3 This is a schematic diagram of adding a target node on the right side in one embodiment of this application; Figure 4 This is a schematic diagram of adding a target node on the left side in one embodiment of this application; Figure 5 This is a schematic diagram of a node connection processing device in one embodiment of this application; Figure 6 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] This application provides a node connection processing method based on a workflow canvas, which can be applied to, for example... Figure 1 The application environment shown. Specifically, this workflow canvas-based node connection processing method is applied in a workflow canvas-based node connection processing system, which includes, for example,... Figure 1 The diagram illustrates a client and server that communicate over a network to implement the node connection processing method based on a workflow canvas. The client, also known as the user terminal, refers to the 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 2As shown, this application embodiment provides a node connection processing method based on a workflow canvas, which is applied to... Figure 1 Taking the server in the example, the following steps are included: S101: Render the first add entry and the second add entry on both sides of the current node respectively. The first add entry is used to trigger the add process of the upstream node, and the second add entry is used to trigger the add process of the downstream node.
[0015] As an example, the current node refers to the node that the user is currently selecting or operating on in the workflow canvas. The first add entry point is rendered to the left of the current node, used to trigger the upstream node add process; that is, adding a new node upstream of the current node, which will become a predecessor dependency of the current node. The second add entry point is rendered to the right of the current node, used to trigger the downstream node add process; that is, adding a new node downstream of the current node, which will become a successor node of the current node. Both the first and second add entry points are presented as "+" buttons, floating on the left and right edges of the current node for easy user identification and clicking. The first add entry point on the left uses an arrow icon pointing to the left, and the second add entry point on the right uses an arrow icon pointing to the right, to visually distinguish the functional differences between the two entry points.
[0016] In a specific example, the server displays a text creation node in the workflow canvas. The server renders a "+" button with a left-pointing arrow icon on the left edge of the text creation node as the first entry point, and a "+" button with a right-pointing arrow icon on the right edge of the node as the second entry point. The two entry buttons maintain a preset visual distance from the node edges, ensuring clear visual visibility without obscuring the node's ports.
[0017] As can be seen, in this step, by rendering the first and second add entry points on both sides of the current node respectively, the user is provided with clear upstream and downstream node add entry points, so that subsequent node add operations have clear direction.
[0018] S102: In response to a trigger operation for the first or second add entry point, obtain the node attribute information of the current node.
[0019] As an example, a triggering operation refers to the user's action of clicking the first or second add entry point. Node attribute information refers to the relevant attribute data of the current node, including but not limited to node type information, format information, and business type identifier information. The format information includes input and output formats. After detecting a user's click on the first or second add entry point, the server reads the node attribute information of the current node from the cache or database. Node type information includes the type category to which the node belongs, such as text creation, image generation, or video generation. Input format includes the data format types that the node can receive when acting as a downstream node. Output format includes the data format types that the node can output when acting as an upstream node. The business type identifier can include the starting node type, intermediate processing node type, and ending node type.
[0020] In a specific example, the user clicks the second add entry on the right side of the text image node. The server determines that the triggered operation is a downstream add operation, and then obtains the attribute information of the text image node, including the node type as "image generation type", the input format as "text format", the output format as "image format", and the business type identifier as "intermediate processing node type".
[0021] As can be seen, in this step, the node attribute information of the current node is obtained by responding to the trigger operation, which provides a data foundation for the subsequent generation of the candidate node list.
[0022] S103: Generate a candidate node list based on the entry direction and node attribute information corresponding to the trigger operation.
[0023] As an example, the entry direction refers to the direction in which the action is triggered. When a user triggers the first entry point, the entry direction is upstream; when a user triggers the second entry point, the entry direction is downstream. The candidate node list refers to a list of node types that users can choose to add, filtered according to preset recommendation rules. The server generates the candidate node list by executing preset recommendation logic based on the entry direction and the node attribute information of the current node.
[0024] In a specific example, the user clicks the second add entry point to the right of the text-to-image node, with the add entry direction being downstream. Based on this add entry direction and the node attribute information of the current node, the server filters out node types matching the current node from a preset node set, generating a candidate node list, including image editing nodes, image super-resolution nodes, style transfer nodes, and image-to-video nodes, etc.
[0025] As can be seen, in this step, by generating a candidate node list based on the direction of the entry point and node attribute information, the recommendation results are matched with the user's intention to add the node and the attributes of the current node, thus improving the accuracy of the recommendation.
[0026] S104: In response to the selection operation of the target node in the candidate node list, create the target node on the corresponding side of the current node; wherein, when the triggering operation is to trigger the first add entry, the corresponding side is the left side, and when the triggering operation is to trigger the second add entry, the corresponding side is the right side.
[0027] As an example, a selection operation refers to the user's action of clicking on a candidate node in the candidate node list. The target node is the candidate node to be selected. The corresponding side refers to the side opposite to the direction of the entry point. When the entry direction is upstream, the target node is created to the left of the current node; when the entry direction is downstream, the target node is created to the right of the current node. In response to the user's selection operation, the server creates the target node on the corresponding side, aligning the vertical center of the target node with the vertical center of the current node and maintaining a preset standard horizontal distance between them.
[0028] In a specific example, the user selects an image editing node in the second add entry on the right side of the text image node, with the add entry direction being downstream. The server creates an image editing node on the right side of the text image node, with the vertical centers of the two nodes aligned and a preset standard horizontal spacing maintained between them.
[0029] As can be seen, in this step, by creating a target node on the corresponding side of the current node, the position of the new node is aligned with the user's addition direction. Figure 1 This ensures the orderly layout of the canvas.
[0030] S105: Based on the direction of the added entry, establish a connection between the current node and the target node.
[0031] As an example, the server determines the upstream / downstream relationship between the current node and the target node based on the direction of the entry point and establishes a connection. When the entry direction is downstream, the current node is the upstream node, the target node is the downstream node, and the connection runs from the output anchor point of the current node to the input anchor point of the target node. When the entry direction is upstream, the target node is the upstream node, the current node is the downstream node, and the connection runs from the output anchor point of the target node to the input anchor point of the current node.
[0032] In a specific example, the user selected an image editing node in the second add entry on the right side of the text graph node, with the add entry direction being downstream. The server automatically establishes a connection from the output anchor point of the text graph node to the input anchor point of the image editing node.
[0033] As can be seen, in this step, by automatically establishing connections based on the direction of the added entry, the addition of nodes and the connection are completed simultaneously. Users do not need to manually drag and drop connections, which significantly simplifies the workflow setup process and improves workflow setup efficiency.
[0034] In summary, the embodiments of this application achieve the following effects through the above steps S101 to S105: by rendering a first add entry for triggering the upstream add process and a second add entry for triggering the downstream add process on both sides of the current node, after the user clicks the add entry on the corresponding side according to the add requirements, the system automatically creates the target node on the corresponding side according to the direction of the add entry and establishes the connection in the corresponding direction. This allows the user to complete the directional addition of the node and automatic connection in just one step, without the need for manual drag positioning and manual connection establishment, thereby significantly simplifying the workflow building operation steps and improving the workflow building efficiency.
[0035] In one embodiment, rendering the first add entry and the second add entry on both sides of the current node respectively includes the following steps: S111: Obtain the service type identifier of the current node; S112: When the business type is identified as the starting node type, only the second added entry is rendered on the right side of the current node; S113: When the business type is identified as an intermediate processing node type, render the first add entry on the left side of the current node and render the second add entry on the right side of the current node; S114: When the business type is identified as the termination node type, only the first added entry is rendered on the left side of the current node.
[0036] As an example, the business type identifier refers to the business role category of the current node in the workflow, including but not limited to the starting node type, intermediate processing node type, and ending node type. The starting node type refers to the node type that serves as the source of workflow data, such as text material input nodes, image material input nodes, video material input nodes, and audio material input nodes. The intermediate processing node type refers to the node type that processes, transforms, or generates input data, such as text-to-image nodes, text creation nodes, image editing nodes, video generation nodes, audio synthesis nodes, image super-resolution nodes, and style transfer nodes. The ending node type refers to the node type at the end of the workflow, where there is no compliant executable business logic downstream, such as manual proofreading nodes, content export nodes, and result archiving nodes.
[0037] When the business type is identified as the starting node type, the server only renders the second add entry on the right side of that node, hiding the first add entry. The starting node is the starting point of the workflow, and there is no execution logic upstream of it that can be relied upon. All business processing flows must be carried out downstream of it. Prohibiting the addition of nodes upstream of the starting node can avoid execution loops and logical infinite loops.
[0038] When the business type is identified as an intermediate processing node, the server renders the first add entry on the left side of the node and the second add entry on the right side. The intermediate processing node is the core processing unit of the workflow. It can either add subsequent processing nodes downstream to build a forward process or add preceding processing nodes upstream to complete a reverse process, supporting flexible two-way operation of forward workflow building and reverse completion.
[0039] When the business type is identified as a termination node, the server only renders the first add entry on the left side of that node, hiding the second add entry. A termination node is the end of the workflow, and its downstream has no compliant executable business logic. It must be at the end of the workflow chain. Prohibiting the addition of nodes downstream of termination nodes can avoid confusion in the process execution logic.
[0040] In a specific example, the server identifies the image material input node as a start node type. Only the second add entry is rendered on the right side of this node; no add entry is rendered on the left. Users cannot add any nodes upstream of this image material input node. The server identifies the text image node as an intermediate processing node type. Only the first add entry is rendered on the left side of this node, and the second add entry is rendered on the right side. Users can add downstream nodes by clicking the right-side entry or upstream nodes by clicking the left-side entry. The server identifies the manual proofreading node as a termination node type. Only the first add entry is rendered on the left side of this node; no add entry is rendered on the right. Users cannot add any nodes downstream of this manual proofreading node.
[0041] As can be seen, in this embodiment, by performing differentiated entry point rendering based on the business type identifier, the workflow topology is standardized from the source, effectively avoiding execution loops caused by adding meaningless nodes upstream of the starting node and downstream of the ending node. At the same time, the operation interface is simplified, invalid operation entries are removed, and the probability of user misoperation is reduced.
[0042] In one embodiment, the node attribute information includes node type information and format information, and the format information includes input format and output format; Based on the entry direction and node attribute information corresponding to the triggered operation, a candidate node list is generated, including the following steps: S131: Based on the direction of the added entry point, filter out flow-matching nodes from the preset node set. Specifically, when the added entry direction is upstream, the flow-matching nodes are those whose output can be connected to the input of the current node; when the added entry direction is downstream, the flow-matching nodes are those whose input can be connected to the output of the current node. S132: Based on the node type information, filter out type-compliant nodes from the flow matching nodes. The upstream and downstream topological relationship between type-compliant nodes and the current node conforms to the rules of a directed acyclic graph. S133: Based on the format information, select candidate nodes from the candidate node list from the type-compliant nodes. Specifically, when the format information is an input format, the candidate node is a type-compliant node whose output format matches the input format of the current node; when the format information is an output format, the candidate node is a type-compliant node whose input format matches the output format of the current node.
[0043] As an example, node type information refers to the type category to which the current node belongs. Format information refers to the input and output formats of the current node. Input format refers to the data formats that the current node can receive when acting as a downstream node, such as text, image, video, and audio formats. Output format refers to the data formats that the current node can output when acting as an upstream node, such as text, image, video, and audio formats. Flow direction matching nodes are nodes that match the current node in the workflow direction. When adding an upstream entry direction, a flow direction matching node is a node whose output can be connected to the current node's input. When adding a downstream entry direction, a flow direction matching node is a node whose input can be connected to the current node's output. Type-compliant nodes are nodes whose upstream and downstream topology with the current node conforms to the rules of a directed acyclic graph, i.e., they will not form an execution loop. Candidate nodes are nodes whose format information matches the format information of the current node.
[0044] The server executes a three-layer progressive filtering logic to generate a candidate node list. The first layer is direction filtering: based on the user-triggered entry direction, the server filters nodes from a preset node set that match the flow direction. If the entry direction is upstream, the matching node is a node whose output can connect to the current node's input; if the entry direction is downstream, the matching node is a node whose input can connect to the current node's output. The second layer is type filtering: based on the current node's node type information, the server filters type-compliant nodes from the flow-compliant nodes, i.e., nodes whose upstream and downstream topology with the current node conforms to the directed acyclic graph rules, ensuring that the workflow does not enter an infinite loop during execution. The third layer is format filtering: based on the current node's input or output format, the server filters candidate nodes from the type-compliant nodes. When the format information is the current node's input format, the candidate node is a type-compliant node whose output format matches the current node's input format; when the format information is the current node's output format, the candidate node is a type-compliant node whose input format matches the current node's output format.
[0045] In a specific example, the user clicks the second add entry on the right side of the text-to-image node, with the add entry direction being downstream. The server performs the first layer of direction filtering, selecting nodes from the preset node set whose input ends can be connected to the output end of the text-to-image node, thus obtaining flow-matching nodes. The server performs the second layer of type filtering, selecting type-compliant nodes from the flow-matching nodes based on the node type information of the text-to-image node, filtering out nodes that would cause execution to close the loop. The server performs the third layer of format filtering. Since the output format in the format information of the text-to-image node is "image format," meaning the current node's format information is the output format, the server selects nodes with the input format "image format" from the type-compliant nodes, obtaining a candidate node list, including image editing nodes, image super-resolution nodes, style transfer nodes, and image-to-video nodes, etc.
[0046] In another specific example, the user clicks the first add entry on the left side of the text graph node, with the add entry direction being upstream. The server performs the first layer of direction filtering, selecting nodes from the preset node set whose output ends can be connected to the input ends of the text graph node, resulting in flow-matching nodes. The server performs the second layer of type filtering, selecting type-compliant nodes from the flow-matching nodes. The server performs the third layer of format filtering. Since the input format in the text graph node's format information is "text format," and the current node's format information is the input format, the server selects nodes with an output format of "text format" from the type-compliant nodes, resulting in a candidate node list, including text material input nodes, text creation nodes, prompt word optimization nodes, and text translation nodes, etc.
[0047] As can be seen, in this embodiment, the three-layer progressive logic of direction filtering, type compliance filtering, and format matching filtering ensures that each node in the candidate node list meets the triple matching requirements of direction, topology, and format. Users do not need to search through the full list of nodes one by one, but can quickly locate the target node in the concise candidate node list, avoiding the problems of incorrect node selection and format mismatch.
[0048] It should be noted that before the three-tier filtering logic is executed, special adaptation rules can be applied based on the business type identifier of the current node and the business attributes of the compliant nodes. Specifically, these rules can include: when the current node is a first-type processing node with an input format of image or video and an output format of text, nodes with a text output attribute among the compliant nodes are added to the priority display position in the candidate node list; when the current node is a second-type processing node with multiple input ports and connecting to multiple upstream nodes, nodes with an aggregation attribute among the compliant nodes are added to the candidate node list; when the business attribute of the compliant node is a terminal node, terminal nodes are filtered from the candidate node list corresponding to the upstream addition entry point of the current node; when the current node is an approval node, the left and right addition entry points for approval nodes are retained. These special node adaptation rules have higher priority than the three-tier filtering logic and are used to cover edge scenarios that general rules cannot handle, ensuring the accuracy and business adaptability of the recommendation results under different business scenarios.
[0049] In one embodiment, creating the target node on the corresponding side of the current node includes the following steps: S141A: Obtain the X-axis coordinate, Y-axis coordinate, width value, and standard horizontal spacing of the current node; S142A: When the corresponding side is the right side, calculate the sum of the X-axis coordinate, the width value, and the standard horizontal spacing as the initial X-axis coordinate of the target node, use the Y-axis coordinate as the initial Y-axis coordinate of the target node, and create the target node to the right of the current node based on the initial X-axis coordinate and the initial Y-axis coordinate. S143A: When the corresponding side is the left side, calculate the difference between the X-axis coordinate, the width value, and the standard horizontal spacing, and use it as the initial X-axis coordinate of the target node. Use the Y-axis coordinate as the initial Y-axis coordinate of the target node, and create the target node to the left of the current node based on the initial X-axis coordinate and the initial Y-axis coordinate.
[0050] As an example, the X-axis coordinate refers to the horizontal position coordinate of the current node in the workflow canvas coordinate system, and the Y-axis coordinate refers to the vertical position coordinate of the current node in the workflow canvas coordinate system. The width value refers to the horizontal dimension of the current node on the canvas, i.e., the width of the current node. The standard horizontal spacing refers to the standard horizontal distance between nodes preset on the canvas, such as 150 pixels. After obtaining the above parameters, the server uses them as input data to calculate the initial position of the target node, ensuring that the position calculation of the target node is based on a reliable standard.
[0051] When the corresponding side is the right side, the server calculates the initial X-axis coordinates of the target node based on the current node's X-axis coordinate, width, and standard horizontal spacing. The initial X-axis coordinates of the target node are equal to the sum of the current node's X-axis coordinate, width, and standard horizontal spacing, ensuring the target node is flush against the right edge of the current node and maintains a preset standard horizontal spacing. Simultaneously, the server uses the current node's Y-axis coordinate as the target node's initial Y-axis coordinate, aligning the target node's vertical center with the current node's vertical center. Finally, the server creates the target node to the right of the current node based on the calculated initial X-axis and initial Y-axis coordinates.
[0052] When the corresponding side is the left, the server calculates the initial X-axis coordinate of the target node based on the current node's X-axis coordinate, width, and standard horizontal spacing. The initial X-axis coordinate of the target node is equal to the difference between the current node's X-axis coordinate, width, and standard horizontal spacing, ensuring the target node is flush against the left edge of the current node and maintains a preset standard horizontal spacing. Simultaneously, the server uses the current node's Y-axis coordinate as the target node's initial Y-axis coordinate, aligning the target node's vertical center with the current node's vertical center. Finally, the server creates the target node to the left of the current node based on the calculated initial X-axis and initial Y-axis coordinates.
[0053] In a specific example, such as Figure 3 As shown, the current node has an X-axis coordinate of 100, a Y-axis coordinate of 200, a width of 120, and a standard horizontal spacing of 150. The user clicked the second add entry on the right side of the current node, with the add entry direction being downstream, corresponding to the right side. Based on the above parameters, the server executes step S142A: calculating the initial X-axis coordinate of the target node as 100+120+150=370 and the initial Y-axis coordinate as 200, and creating the target node at coordinates (370, 200) to the right of the current node, ensuring the target node is directly to the right of the current node, maintaining a standard horizontal spacing of 150 pixels between them, and perfectly aligned vertically.
[0054] In another specific example, such as Figure 4As shown, the current node has an X-axis coordinate of 100, a Y-axis coordinate of 200, a width of 120, and a standard horizontal spacing of 150. The user clicked the first add entry on the left side of the current node, with the add entry direction being upstream, corresponding to the left side. Based on the above parameters, the server executes step S143A: calculates the initial X-axis coordinate of the target node as 100-120-150=-170, the initial Y-axis coordinate as 200, and creates the target node at coordinates (-170, 200) to the left of the current node, ensuring the target node is directly to the left of the current node, maintaining a standard horizontal spacing of 150 pixels between them, and perfectly aligned vertically.
[0055] As can be seen, in this embodiment, by calculating the initial position of the target node according to the corresponding side, the position of the new node is accurately located on the corresponding side of the current node, maintaining a preset standard horizontal distance and vertical center alignment with the current node, thus ensuring the standardization and consistency of the canvas layout, without requiring the user to manually adjust the node position.
[0056] In one embodiment, when the current node is in a branch workflow, the following steps are also included: S141B: Get the branch identifier of the branch where the current node is located; S142B: Determine the blank area on the side of the branch where the current node is located based on the branch identifier; S143B: Based on the side blank area and the preset horizontal spacing, set the initial position of the target node in the side blank area, and maintain the preset horizontal spacing with the current node; S144B: After the target node is created, obtain the position data of the branch and the position data of the adjacent branches; S145B: Based on the branch position data and the position data of adjacent branches, detect whether the distance between the branch and the adjacent branch is less than the preset branch distance threshold, and obtain the branch distance detection result; S146B: When the branch spacing detection result is less than the preset branch spacing threshold, according to the preset branch avoidance distance, all nodes in the adjacent branches are shifted in batches in the direction away from the branch.
[0057] As an example, a branch identifier is a unique identifier for the branch to which the current node belongs, used to distinguish node sequences in different parallel branches within a workflow. Side blank areas refer to the empty areas within the current branch that can be used to place new nodes. The branch spacing threshold is a preset minimum spacing value between branches, such as 120 pixels. When the spacing between two branches is less than this threshold, it indicates that the two branches are too close, posing a risk of node overlap or visual crowding, requiring branch avoidance. The preset branch avoidance distance is a pre-defined distance the entire branch should be shifted, such as 150 pixels.
[0058] When the current node is in a branch workflow, the server identifies the scenario and performs node positioning and layout adjustments within that scenario. The server first obtains the branch identifier of the branch containing the current node. Based on this identifier, it determines the side blank area occupied by the branch on the canvas, which is the horizontal projection area of the branch's node sequence. Then, based on this side blank area and a preset horizontal spacing, the server sets the initial position of the target node within this side blank area, maintaining a preset horizontal spacing with the current node. This ensures the new node is created within a reasonable range of the current branch and does not encroach on the space of adjacent branches. After the target node is created, the server obtains the position data of the current branch and the adjacent branches. Based on these data, the server calculates the actual distance between the current branch and adjacent branches and checks if this distance is less than a preset branch spacing threshold. If the distance is less than the threshold, it indicates that the two branches are too close, posing a risk of node overlap or visual crowding. The server then moves all nodes in the adjacent branches in batches along a direction away from the current branch, according to a preset branch avoidance distance, to increase the spacing between the two branches.
[0059] In a specific example, the server determines that the current node belongs to branch A. The horizontal range of the blank area on the side of branch A is between 150 and 500 pixels on the X-axis. The server sets the target node within this blank area, maintaining a horizontal distance of 150 pixels from the current node. After the target node is created, the server detects that the distance between branch A and the adjacent branch B is 80 pixels, which is less than the preset branch distance threshold of 120 pixels. Based on the preset branch avoidance distance of 150 pixels, the server shifts all nodes in branch B 150 pixels to the right, while the relative positions of the nodes within branch B remain unchanged. Branch B as a whole is shifted 150 pixels to the right.
[0060] In another specific example, branch A is located to the right of branch B. The server detects that the distance between branch A and branch B is 60 pixels, which is less than the preset branch spacing threshold of 120 pixels. Based on the preset branch avoidance distance of 150 pixels, the server shifts all nodes in branch A to the left by 150 pixels, while keeping the relative positions of the nodes within branch A unchanged.
[0061] As can be seen, in this embodiment, by setting the target node in the blank area on the side of the current branch in the branch workflow scenario, it is ensured that the new node is created within a reasonable range of the current branch and does not encroach on the space of adjacent branches. By performing branch spacing detection after the target node is created, and performing overall batch translation of adjacent branches when insufficient branch spacing is detected, the spacing between branches is ensured to be compliant, effectively avoiding the overlap of nodes and connections between branches, while maintaining the relative positions between nodes within each branch and not destroying the layout structure within the branches already built by the user.
[0062] In one embodiment, when the current node is located within a nested subprocess container, the following steps are further included: S141B: Obtain the container boundary coordinates of the nested subprocess container; S142B: Based on the container boundary coordinates and the current node's node coordinates, determine that the initial position of the target node is within the range defined by the container boundary coordinates; S143B: After the target node is created, the node layout within the nested sub-process container is adjusted. After the adjustment, all nodes whose positions have changed are within the range defined by the container boundary coordinates.
[0063] As an example, a nested sub-process container refers to a container in the workflow canvas used to encapsulate a group of sub-process nodes. This container participates in the execution of the main process as an independent sub-graph unit. The container boundary coordinates refer to the coordinates of the top-left and bottom-right vertices of the container, defining the container's range. For example, the top-left vertex coordinates might be (X_min, Y_min), and the bottom-right vertex coordinates might be (X_max, Y_max). The positions of all nodes within the container must satisfy the condition that their X-coordinates are between X_min and X_max, and their Y-coordinates are between Y_min and Y_max. Nodes within a sub-process container follow the same bidirectional addition and recommendation rules, and the addition of upstream and downstream nodes to the entire sub-process container is supported. Changes to nodes within a sub-process will not affect the overall layout of the main process.
[0064] When the current node is located within a nested sub-process container, the server identifies the scenario and executes node positioning and layout constraints within the nested sub-process scenario. The server first obtains the container boundary coordinates of the nested sub-process container. Then, based on the container boundary coordinates and the current node's coordinates, the server determines that the initial position of the target node is within the range defined by the container boundary coordinates; that is, the creation position of the target node cannot exceed the boundary of the sub-process container, ensuring that the new node is always inside the container. If the initial position of the target node calculated based on the entry direction and standard spacing is outside the container boundary, the server adjusts the initial position of the target node to the nearest compliant position within the container boundary. Specifically, if the initial X-axis coordinate of the target node is less than X_min, it is adjusted to X_min; if the initial X-axis coordinate of the target node is greater than X_max, it is adjusted to X_max minus the width value of the target node; the adjustment in the Y-axis direction is similar. After the target node is created, the server performs node layout adjustment within the nested sub-process container. All nodes whose positions have changed after the adjustment are within the range defined by the container boundary coordinates. That is, the positions of all nodes in the container satisfy the boundary constraints, and no node exceeds the left, right, top, or bottom boundaries of the container.
[0065] In a specific example, the server obtains the container boundary coordinates of the nested sub-process container as the top-left corner (0, 0) and the bottom-right corner (800, 600). The current node's X-axis coordinate is 700, and its width is 120. The target node's width is 120, the standard horizontal spacing is 150, and the entry direction is downstream (right). According to the standard calculation formula, the target node's initial X-axis coordinate is 700 + 120 + 150 = 970 pixels, exceeding the container's right boundary by 800 pixels. The server detects this initial position exceeding the container boundary and adjusts the target node's initial X-axis coordinate to 800 - 120 = 680 pixels, i.e., adjusting it to the nearest compliant position within the container boundary. The initial Y-axis coordinate is the same as the current node's Y-axis coordinate. The server creates the target node at coordinates (680, current Y). After the target node is created, the server performs node layout adjustments within the container. All adjusted nodes are located within the container boundary, maintaining a neat and orderly layout within the container.
[0066] As can be seen, in this embodiment, by restricting the position of the target node within the container boundary in the nested sub-process container scenario, it is ensured that the nodes within the sub-process will not exceed the container boundary, thus maintaining the integrity and independence of the sub-process. Changes to nodes within the sub-process do not affect the overall layout of the main process. At the same time, it effectively avoids display anomalies and process chaos caused by nodes exceeding the container boundary, ensuring the standardized presentation of the nested sub-process structure in the canvas.
[0067] In one embodiment, after creating the target node on the corresponding side of the current node, the following steps are further included: S104A1: Obtain the target rectangular region of the target node. The target rectangular region is formed by the x-coordinate of the top left corner vertex, the y-coordinate of the top left corner vertex, the node width value, and the node height value of the target node on the workflow canvas. S104A2: Traverse the rectangular areas of existing nodes in the workflow canvas, and detect whether there is an overlapping area between the target rectangular area and the rectangular areas of existing nodes, or detect whether the distance between the target rectangular area and the rectangular areas of existing nodes is less than the preset safety distance. S104A3: When an overlapping area is detected or the spacing is less than the preset safety spacing, the collision node is determined based on the existing nodes that have collided, and the collision direction is determined based on the orientation of the collision node relative to the target node. S104A4: Calculate the displacement based on the collision direction and the node size of the collision node; S104A5: Perform batch translation of the colliding node and all associated nodes at the same topological level as the colliding node according to the displacement.
[0068] As an example, the target rectangular area refers to the rectangular region occupied by the target node in the canvas, bounded by the x-coordinate of the top-left vertex, the y-coordinate of the top-left vertex, the node width, and the node height. The preset safety distance refers to the minimum safe distance between two nodes in the canvas, such as 30 pixels. A colliding node is an existing node whose rectangular area overlaps with the target node's or whose distance is less than the preset safety distance. Displacement refers to the distance that needs to be translated to eliminate the collision.
[0069] After the target node is created, the server automatically initiates the canvas layout adaptive adjustment process. The server first obtains the target rectangular region of the target node, fully defining the space occupied by the target node on the canvas. Simultaneously, the server traverses the rectangular regions of all existing nodes in the workflow canvas, obtaining the space occupied by each existing node on the canvas. Then, based on the target rectangular region and the rectangular regions of each existing node, the server checks for overlap between the target rectangular region and the rectangular regions of each existing node, i.e., whether the projections of the two rectangles intersect in the horizontal and vertical directions; it also checks whether the distance between the target rectangular region and the rectangular regions of each existing node is less than a preset safety distance, i.e., whether the minimum distance between the edges of the two rectangles is lower than a system-set safety threshold. When an overlap is detected between the target node and an existing node, or when the distance between the target node and an existing node is less than the preset safety distance, the server determines the colliding node based on the existing node involved in the collision, and determines the collision direction based on the orientation of the colliding node relative to the target node. The server calculates the required displacement distance based on the collision direction and the node size of the colliding node. Finally, the server performs batch translation of the colliding node and all associated nodes at the same topological level as the colliding node according to the calculated displacement.
[0070] In a specific example, node B already exists in the workflow canvas. The top-left corner of node B's rectangular region has an x-coordinate of 300 pixels, a y-coordinate of 0 pixels, a width of 150 pixels, and a height of 80 pixels, meaning the rectangular region of node B is (300, 0, 150, 80). The user creates target node C through a second add entry. The top-left corner of target node C's rectangular region also has an x-coordinate of 150 pixels, a y-coordinate of 0 pixels, a width of 150 pixels, and a height of 80 pixels, meaning the rectangular region of target node C is (150, 0, 150, 80). The server retrieves the target rectangular region (150, 0, 150, 80) of target node C and the existing rectangular region (300, 0, 150, 80) of node B. The server detects the distance between two rectangular regions. The right boundary of target node C is 150 + 150 = 300 pixels, and the left boundary of node B is 300 pixels. The edges of the two rectangular regions just touch, with a distance of 0 pixels, which is less than the preset safety distance of 30 pixels. The server determines that node B is the colliding node, and the collision direction is horizontal because node B is located to the right of target node C. The server calculates the displacement as the width of target node C (150 pixels) plus the standard horizontal distance of 150 pixels, which is 300 pixels. The server translates node B and all related nodes at the same topological level as node B by 300 pixels along the positive X-axis (i.e., to the right). After the translation, the x-coordinate of the top-left corner vertex of node B's rectangular region becomes 300 + 300 = 600 pixels, and the distance between node B and target node C becomes 300 pixels, which is greater than the preset safety distance of 30 pixels, thus eliminating the collision.
[0071] In another specific example, node D already exists in the workflow canvas. The top-left corner of node D's rectangular region has an x-coordinate of 0 pixels, a y-coordinate of 100 pixels, a width of 150 pixels, and a height of 80 pixels, meaning the rectangular region of node D is (0, 100, 150, 80). The rectangular region of the target node C is (0, 0, 150, 80). The server detects that the bottom boundary of target node C is 0 + 80 = 80 pixels, and the top boundary of node D is 100 pixels. The distance between the two rectangular regions is 100 - 80 = 20 pixels, which is less than the preset safety distance of 30 pixels. The server determines that node D is a collision node, and the collision direction is vertical because node D is located below target node C. The server calculates the vertical displacement as the height of target node C (80 pixels) plus the standard vertical distance of 80 pixels, which is 160 pixels. The server translates node D and all associated nodes at the same topology level as node D by 160 pixels along the positive Y-axis (i.e., downwards). After translation, the ordinate of the top left corner vertex of the rectangular region of node D becomes 100+160=260 pixels, and the distance between node D and the target node C becomes 260-80=180 pixels, which is greater than the preset safety distance of 30 pixels, thus eliminating the collision.
[0072] As can be seen, in this embodiment, the canvas layout is automatically adjusted through collision detection, displacement calculation and batch translation, avoiding the overlap of newly added nodes with existing nodes, and ensuring the standardization and aesthetics of the canvas layout.
[0073] In one embodiment, after performing batch translation of the colliding node and all associated nodes at the same topological level as the colliding node according to the displacement, the following steps are also included: S104A51: Obtain the updated target rectangular region and the updated existing node rectangular region; wherein, the updated target rectangular region is obtained by synchronously translating the target node's target rectangular region according to the displacement, and the updated existing node rectangular region is obtained by synchronously updating the existing node's rectangular region according to the displacement. S104A52: Obtain the updated output anchor point coordinates and the updated input anchor point coordinates of each node whose position has changed; S104A53: Based on the updated output anchor point coordinates and the updated input anchor point coordinates, regenerate the Bézier curve path of each connection associated with the node whose position has changed, and obtain the updated connection path of each associated node. S104A54: Perform secondary collision detection based on the updated target rectangular region and the updated existing node rectangular region to obtain the secondary collision detection result; S104A55: When the secondary collision detection result is that no overlapping area is detected and the spacing is not less than the preset safety spacing, render the connection of each associated node according to the updated connection path. S104A56: When the secondary collision detection result is that an overlapping area is still detected or the spacing is less than the preset safety spacing, delete the updated connection path of each associated node, revert all nodes to the position before the target node was created, and delete the target node.
[0074] As an example, the updated target rectangle region refers to the new rectangular area occupied by the target node after batch translation, bounded by the x-coordinate of the top-left vertex, the y-coordinate of the top-left vertex, the node width, and the node height. The updated existing node rectangle region refers to the new rectangular area occupied by existing nodes whose positions have changed after batch translation. The updated output anchor point coordinates refer to the new position coordinates of the output port on the canvas after the node translation. The updated input anchor point coordinates refer to the new position coordinates of the input port on the canvas after the node translation. The Bézier curve path refers to the smooth curve path connecting two node ports. Secondary collision detection refers to re-checking whether there is overlap or insufficient spacing between the updated target rectangle region and the updated existing node rectangle region after batch translation.
[0075] After the batch translation is completed, the server performs connection path synchronization optimization and layout compliance verification. First, the server synchronously updates the target rectangular region of the target node and the rectangular regions of existing nodes based on the displacement of the batch translation. Since the node positions have changed, their corresponding rectangular region positions also change, requiring the server to obtain the updated rectangular regions for secondary collision detection. The server obtains the updated output and input anchor point coordinates of each node whose position has changed. Since the node positions have translated, the node anchor point coordinates also change, requiring the server to obtain the new anchor point coordinates to update the connection paths. Based on the updated output and input anchor point coordinates, the server regenerates the third-order Bézier curve path for each connection associated with the node whose position has changed, obtaining the updated connection paths for each associated node. The server performs secondary collision detection based on the updated target rectangular region and the updated existing node rectangular regions to verify whether the batch translation has successfully eliminated all collisions. If the secondary collision detection result shows no overlapping areas detected and the spacing is not less than the preset safety spacing, the layout adjustment is successful, and the server renders the connections of each associated node according to the updated connection paths. If the secondary collision detection result still detects overlapping areas or the spacing is less than the preset safe spacing, it means that the layout adjustment has not completely solved the collision problem. The server deletes the updated connection paths of each associated node, rolls all nodes back to the position before the target node was created, deletes the target node, and pops up an error message.
[0076] In a specific example, after the server completes the batch translation of node B and its associated nodes, the x-coordinate of the top-left vertex of node B changes from 300 pixels to 600 pixels. The server obtains the updated rectangular region (150, 0, 150, 80) of the target node C and the updated rectangular region (600, 0, 150, 80) of node B. The server obtains the output and input anchor point coordinates of node B after translation. The output anchor point coordinates of node B change from (450, 40) to (750, 40), and the input anchor point coordinates change from (300, 40) to (600, 40). Based on the updated anchor point coordinates, the server regenerates the third-order Bézier curve path for each connection associated with node B, obtaining the updated connection path. The server performs secondary collision detection based on the updated target rectangular region (150, 0, 150, 80) and the updated existing node rectangular region (600, 0, 150, 80). The right boundary of target node C is 150 + 150 = 300 pixels, and the left boundary of node B is 600 pixels. The distance between the two rectangular regions is 300 pixels, which is greater than the preset safety distance of 30 pixels, and no overlapping area was detected. The secondary collision detection passed. The server renders the connections of each associated node according to the updated connection path.
[0077] In another specific example, when the server performed a secondary collision detection after completing the batch translation, it found that due to the presence of other nodes in the canvas, the target node and another existing node E still had an overlapping area after the batch translation, and the secondary collision detection failed. The server deleted the updated connection paths of each associated node, rolled back all nodes to the position before the creation of the target node, and deleted the target node, displaying the message "Layout adjustment error, rolled back to the state before operation".
[0078] As can be seen, in this embodiment, by obtaining the updated rectangular area and the updated anchor point coordinates after batch translation, the Bézier curve path of the associated connection is regenerated, ensuring the accurate matching of the connection path with the new position of the node; by performing secondary collision detection, the effectiveness of the layout adjustment is verified; the connection is rendered only when the secondary collision detection passes, ensuring the reliability of the layout adjustment; when the secondary collision detection fails, a rollback operation is performed, deleting the newly generated connection path and restoring the position of all nodes, effectively preventing the user's original layout from being irreversibly destroyed.
[0079] In one embodiment, after creating the target node on the corresponding side of the current node, the following steps are further included: S104B1: Monitor the current zoom level of the workflow canvas; S104B2: Based on the current scaling ratio, perform proportional scaling on the preset safety distance to obtain the updated safety distance.
[0080] Among them, based on the target rectangular area and the rectangular areas of existing nodes, it is detected whether the distance between the target rectangular area and the rectangular areas of existing nodes is less than the preset safety distance, including: based on the target rectangular area and the rectangular areas of existing nodes, it is detected whether the distance between the target rectangular area and the rectangular areas of existing nodes is less than the updated safety distance. Perform secondary collision detection based on the updated target rectangular region and the updated existing node rectangular region to obtain secondary collision detection results. This includes: performing secondary collision detection based on the updated target rectangular region and the updated existing node rectangular region, and using the updated safety distance to obtain secondary collision detection results.
[0081] As an example, the scaling factor of the workflow canvas refers to the proportional value obtained after the user adjusts the overall display size of the canvas using the mouse wheel, scaling slider, or keyboard shortcuts. The scaling factor can be expressed as a percentage or a decimal; for example, a scaling factor of 80% means the canvas is currently displayed at 0.8 times its original size, and a scaling factor of 120% means it is displayed at 1.2 times its original size. The scaling factor defaults to 100% when no scaling operation is performed.
[0082] The preset safety distance refers to the minimum allowable distance between two nodes in the workflow canvas. This value is a fixed value defined based on the canvas's original coordinate system. Regardless of the canvas's current scaling, the physical value of the preset safety distance in the original coordinate system remains unchanged. For example, if the preset safety distance is 30 pixels, it will always be 30 pixels in the original coordinate system. This preset safety distance is used to determine whether layout avoidance adjustments need to be performed between two nodes.
[0083] When a user zooms in on the canvas, the zoom level changes, and the display size and spacing of nodes on the canvas change proportionally. The server continuously monitors for zoom level changes in the workflow canvas. When a zoom level change is detected, the server reads the current zoom level value. Based on the current zoom level, the server performs a proportional scaling of the preset safety spacing to obtain the updated safety spacing. The updated safety spacing is the display spacing threshold at the current canvas display level, and it is calculated as follows: the updated safety spacing equals the preset safety spacing multiplied by the current zoom level.
[0084] For example, if the preset safety distance is 30 pixels, and the current scaling ratio is 80%, the updated safety distance is 30 × 0.8 = 24 pixels. This 24 pixels is the safety distance threshold used for collision detection at the current display scaling ratio. When the current scaling ratio is 120%, the updated safety distance is 30 × 1.2 = 36 pixels. When the current scaling ratio is 100%, the updated safety distance is 30 × 1.0 = 30 pixels.
[0085] In canvas scaling scenarios, the safety distances used by the system during collision detection are all updated safety distances. Specifically, in the initial collision detection, the system checks whether the minimum distance between the edges of the target rectangular region and the existing node's rectangular region is less than the updated safety distance. If it is less, a collision is considered to have occurred; otherwise, no collision is considered to have occurred. In the secondary collision detection, the system performs a secondary collision detection using the updated safety distance, based on the updated target rectangular region and the updated existing node's rectangular region, to verify whether the collisions have been eliminated after batch translation. If the secondary collision detection result shows no overlapping areas detected and the distance is not less than the updated safety distance, the layout adjustment is considered successful; if overlapping areas are still detected or the distance is less than the updated safety distance, the layout adjustment is considered to have failed, and a rollback operation is performed.
[0086] In a specific example, the current canvas scaling is 80%, the preset safety margin is 30 pixels, and the updated safety margin is 30 × 0.8 = 24 pixels. The right boundary of the rectangular region of the target node C is 300 pixels, and the left boundary of the rectangular region of the existing node B is 320 pixels. The distance between the two rectangular regions is 320 - 300 = 20 pixels. The server compares this distance of 20 pixels with the updated safety margin of 24 pixels. Since 20 is less than 24, the server determines that a collision has occurred and performs displacement calculations and batch translation operations.
[0087] In another specific example, the canvas's current scaling is 80%, the preset safety margin is 30 pixels, and the updated safety margin is 30 × 0.8 = 24 pixels. The right boundary of the rectangular region of the target node C is 300 pixels, and the left boundary of the rectangular region of the existing node B is 330 pixels. The spacing between the two rectangular regions is 330 - 300 = 30 pixels. The server compares this spacing of 30 pixels with the updated safety margin of 24 pixels. Since 30 is greater than 24, the server determines that no collision has occurred and does not perform a layout adjustment operation.
[0088] In another specific example, the current canvas scaling is 120%, the preset safety margin is 30 pixels, and the updated safety margin is 30 × 1.2 = 36 pixels. The right boundary of the rectangular region of the target node C is 300 pixels, and the left boundary of the rectangular region of the existing node B is 330 pixels. The distance between the two rectangular regions is 330 - 300 = 30 pixels. The server compares this distance of 30 pixels with the updated safety margin of 36 pixels. Since 30 is less than 36, the server determines that a collision has occurred and performs displacement calculation and batch translation operation. After the batch translation is completed, the server performs a secondary collision detection, still using the updated safety margin of 36 pixels for detection.
[0089] In another specific example, the current canvas scaling is 150%, the preset safety margin is 30 pixels, and the updated safety margin is 30 × 1.5 = 45 pixels. The right boundary of the rectangular region of the target node C is 300 pixels, and the left boundary of the rectangular region of the existing node B is 340 pixels. The distance between the two rectangular regions is 340 - 300 = 40 pixels. The server compares this distance of 40 pixels with the updated safety margin of 45 pixels. Since 40 is less than 45, the server determines that a collision has occurred and performs displacement calculations and batch translation operations. After the batch translation is completed, the server performs a second collision detection, still using the updated safety margin of 45 pixels, to ensure that the node spacing after the layout adjustment meets the safety requirements under the current scaling.
[0090] As can be seen, in this embodiment, by monitoring the current scaling ratio of the canvas and scaling the preset safety distance proportionally according to the current scaling ratio, the safety distance used for the initial collision detection and the secondary collision detection is always synchronized with the current scaling ratio of the canvas. When the canvas is shrunk, the safety distance is shrunk proportionally to avoid misjudging collisions and triggering unnecessary layout adjustments due to an excessively large safety distance; when the canvas is enlarged, the safety distance is enlarged proportionally to avoid missing collisions and causing nodes to visually overlap due to an excessively small safety distance. This mechanism ensures the accuracy of node spacing detection at different scaling ratios, effectively avoids the problem of mismatch between safety distance and display ratio caused by scaling, and improves the user's operating experience and the stability of the canvas layout at different scaling levels.
[0091] In one embodiment, establishing a connection between the current node and the target node based on the direction of the added entry point includes the following steps: S151: Obtain the degree of matching between the output format of the current node and the input format of the target node; S152: Determine the rendering color based on the matching degree: When the matching degree is a perfect match, the rendering color of the connection is determined as the first color; when the matching degree is a compatible match, the rendering color of the connection is determined as the second color. S153: When the added inlet direction is downstream, a third-order Bézier curve path is generated based on the output anchor point coordinates of the current node and the input anchor point coordinates of the target node, and the connection between the output anchor point of the current node and the input anchor point of the target node is rendered according to the rendering color and the third-order Bézier curve path. S154: When the added inlet direction is upstream, a third-order Bézier curve path is generated based on the output anchor point coordinates of the target node and the input anchor point coordinates of the current node. The connection between the output anchor point of the target node and the input anchor point of the current node is then rendered according to the rendering color and the third-order Bézier curve path.
[0092] As an example, matching degree refers to the degree of matching between the output format of the current node and the input format of the target node, including exact match and compatible match. An exact match means that the output format of the current node and the input format of the target node are completely identical in data type, such as image format to image format, or text format to text format. In this case, the data can be directly transmitted without any conversion or adaptation. A compatible match means that the output format of the current node and the input format of the target node differ in data type, but data transmission can be achieved through semantic understanding, format conversion, or special adaptation rules. For example, if the output format of the current node is image format and the input format of the target node is text format, the image can be converted into a text description by an image semantic understanding node before transmission. Or, if the output format of the current node is video format and the input format of the target node is text format, the video content can be converted into a text description by a video semantic understanding node before transmission. The first color can be blue to identify compliant connections with exact matches, indicating that the data transmission link between upstream and downstream nodes is a standard compliant link. The second color can be orange to identify connections with special adaptation rules, indicating that data transmission between upstream and downstream nodes requires special adaptation rules.
[0093] A third-order Bézier curve path is defined by the coordinates of the starting point, the ending point, the first control point, and the second control point. The server calculates the coordinates of the two control points based on the coordinates of the starting and ending anchor points. The coordinates of the control points are determined based on the relative positions of the starting and ending points and preset curvature parameters. Typically, the first control point is located at one-third of the distance from the starting point to the ending point, and the second control point is located at two-thirds of the distance from the starting point to the ending point, ensuring a smooth connection between the starting and ending points.
[0094] In a specific example, the user selects an image editing node as the downstream entry point on the right side of the text graph node, with the entry point direction being downstream. The output format of the text graph node is image format, and the input format of the image editing node is image format; both are identical in data type, resulting in a perfect match, and the connection is rendered in blue. The server obtains the output anchor point coordinates (300, 200) of the text graph node and the input anchor point coordinates (500, 200) of the image editing node, generates a third-order Bézier curve path, with the first control point coordinates at (350, 200) and the second control point coordinates at (450, 200), and the curve is a smooth horizontal curve. The server renders the connection between the output anchor point of the text graph node and the input anchor point of the image editing node according to the blue color and the third-order Bézier curve path.
[0095] In another specific example, the user selected an image semantic understanding node as the downstream entry point to the right of the text graph node, with the entry point direction being downstream. The output format of the text graph node is image format, and the input format of the image semantic understanding node is image format (the image semantic understanding node receives image format input and outputs text format), with the output format being text format. The output format of the text graph node and the input format of the image semantic understanding node are completely identical in data type, resulting in a perfect match, and the connection is rendered in blue. The server generates a third-order Bézier curve path based on the output anchor point coordinates of the text graph node and the input anchor point coordinates of the image semantic understanding node, rendering the connection in blue.
[0096] In another specific example, the user selected an image semantic understanding node as a downstream entry point on the right side of the text creation node (in this scenario, the image semantic understanding node acts as a downstream node, receiving the output of the text creation node). The output format of the text creation node is text, while the input format of the image semantic understanding node is image. The text and image formats are inconsistent in data type, but the business logic of the image semantic understanding node is to convert images to text. Its role as a downstream node receiving the output of the text creation node does not conform to the business flow, and this connection does not constitute a compatible match. Therefore, this connection will not appear in the recommendation list, and the user cannot establish this connection. The correct scenario for compatible matching is as follows: The output format of the text-to-image node is image format, the input format of the downstream image semantic understanding node is image format, and the output format is text format. The input formats of the two are completely consistent, the matching degree is complete match, and it is rendered in blue. The output format of the text-to-image node is image format, and the input format of the downstream text creation node is text format. The image format and text format are inconsistent, but the image semantic understanding node can act as an intermediate adaptation node to convert the image into text before passing it to the text creation node. In this case, the text-to-image node and the text creation node do not establish a direct connection, but instead establish an indirect link through the semantic understanding node as a bridge. The matching degree of a direct connection is non-match, and the connection will not be rendered.
[0097] In another specific example, the server generates a third-order Bézier curve path based on the output anchor point coordinates (300, 200) of the current node and the input anchor point coordinates (500, 200) of the target node. The first control point coordinates are calculated as (350, 200) according to the preset curvature parameters, and the second control point coordinates are (450, 200). The curve is a smooth horizontal curve with a starting point of (300, 200) and an ending point of (500, 200). The curve shape is smooth without sharp corners, and the visual effect is consistent.
[0098] As can be seen, in this embodiment, by determining the rendering color of the connection based on the matching degree, users can quickly identify the format matching relationship between upstream and downstream nodes through the connection color. A fully matched blue connection indicates that the formats of upstream and downstream nodes are completely compatible and data can be directly transmitted without additional configuration by the user. A compatible orange connection indicates that the formats of upstream and downstream nodes are matched through special adaptation rules and there is a data conversion process, reminding users to pay attention to data type conversion. By using a third-order Bézier curve to generate smooth connection paths, the visual effect of the connection is ensured to be beautiful and smooth, without sharp corners or abrupt changes, improving the readability of the canvas and the user experience.
[0099] In one embodiment, after establishing the connection between the current node and the target node according to the direction of the added entry, the following steps are also included: S105A1: Determine the upstream and downstream dependencies between the current node and the target node based on the direction of the added entry point; S105A2: When the upstream and downstream dependency relationship is that the current node is the upstream node and the target node is the downstream node, obtain the output parameter set of the current node and the input parameter set of the target node; S105A3: Traverse the output parameter set, extract one output parameter from it, and use it as the current output parameter; S105A4: Traverse the set of input parameters, extract one input parameter from it, and use it as the current input parameter; S105A5: When the parameter name, parameter type, and business semantic label of the current output parameter are the same as those of the current input parameter, a direct mapping relationship is established between the current output parameter and the current input parameter. S105A6: When all output parameters in the output parameter set have been traversed and no direct mapping relationship has been established, calculate the semantic similarity between each output parameter and each input parameter. S105A7: Based on the semantic similarity calculation results, establish a compatible mapping relationship between the output parameter with the highest semantic similarity and the input parameter; S105A8: Based on the compatibility mapping relationship, convert the data format of the output parameters to be consistent with the input format of the input parameters.
[0100] As an example, upstream and downstream dependencies refer to the relationship between the current node and the target node, where one node acts as the upstream and the other as the downstream. The output parameter set refers to the collection of all output parameters from the upstream node. Each output parameter contains three dimensions of information: parameter name, used to uniquely identify the parameter; parameter type, indicating the data type of the parameter, such as string, integer, image file, audio file, etc.; and business semantic label, indicating the business meaning of the parameter, such as "positive prompt," "negative prompt," "generate image file," etc. The input parameter set refers to the collection of all input parameters from the downstream node. Each input parameter also contains three dimensions of information: parameter name, parameter type, and business semantic label.
[0101] After the connection is established, the server automatically initiates the upstream and downstream parameter mapping process. The server first determines the upstream and downstream dependencies between the current node and the target node based on the direction of the added entry point. When the upstream and downstream dependencies are such that the current node is the upstream node and the target node is the downstream node, the server obtains the output parameter set of the current node and the input parameter set of the target node. The server executes the parameter matching process: iterates through the output parameter set, retrieving one output parameter as the current output parameter; it then iterates through the input parameter set, retrieving one input parameter as the current input parameter. The server compares the parameter name, parameter type, and business semantic tag of the current output parameter with those of the current input parameter. If all three are the same, the server establishes a direct mapping relationship between the current output parameter and the current input parameter, meaning that the output parameter can be directly passed to the corresponding input parameter without any conversion. If, after iterating through all output parameters in the output parameter set, no direct mapping relationship is established, the server calculates the semantic similarity between each output parameter and each input parameter. Semantic similarity is calculated using natural language processing techniques to determine the degree of similarity between the business semantic tags of the parameters. For example, "generate text content" and "positive prompt words" are highly related semantically, while "generate text content" and "image width" are not semantically related. Based on the semantic similarity calculation results, the server establishes a compatible mapping relationship between the output parameter and the input parameter with the highest semantic similarity. Then, based on this compatible mapping relationship, the server converts the data format of the output parameter to be consistent with the input format of the input parameter. For example, the integer combination of "image width" and "image height" is converted into the string format "width × height".
[0102] In a specific example, the user selects a text-generated image node in the downstream entry point on the right side of the text creation node, with the entry point direction being downstream. The text creation node is the upstream node, and the text-generated image node is the downstream node. The server obtains the output parameter set of the text creation node, including four output parameters: Parameter 1 is named "Generated Text Content", type is string, and business semantic label is "Positive Hint Word"; Parameter 2 is named "Text Negative Keywords", type is string, and business semantic label is "Reverse Hint Word"; Parameter 3 is named "Generation Steps", type is integer, and business semantic label is "Iteration Steps"; Parameter 4 is named "Random Seed", type is integer, and business semantic label is "Random Seed". The server obtains the input parameter set of the text creation node, including four input parameters: Parameter 1 is named "positive prompt word", type is string, and business semantic label is "positive prompt word"; Parameter 2 is named "negative prompt word", type is string, and business semantic label is "negative prompt word"; Parameter 3 is named "iteration step count", type is integer, and business semantic label is "iteration step count"; Parameter 4 is named "random seed", type is integer, and business semantic label is "random seed". The server traverses the output parameter set and compares the output parameter "generate text content" (name, type, and semantic label of the text creation node are "generate text content", string type, and "positive prompt word" respectively) with the input parameter "positive prompt word" (name, type, and semantic label of the text creation node are "positive prompt word", string type, and "positive prompt word" respectively). The parameter names are different, but the parameter types and business semantic labels are the same. Because the parameter names are different, the condition of "all three are the same" is not met. The server continues to iterate through other output parameters, comparing "negative keywords" with "positive suggestion words." The parameter names are different, but the parameter types and business semantic tags are the same, failing to meet the "all three are the same" condition. The server then compares "generation steps" with "iteration steps." Again, the parameter names are different, but the parameter types and business semantic tags are the same, again failing to meet the "all three are the same" condition. Finally, the server compares "random seed" with "random seed." The parameter names, parameter types, and business semantic tags are all the same (all "random seed," integer type, "random seed"), satisfying the "all three are the same" condition. The server establishes a direct mapping between the "random seed" output parameter and the "random seed" input parameter. Since no direct mapping is established for other output parameters, the server calculates the semantic similarity between each output parameter and each input parameter. "Generated text content" and "positive suggestion words" have highly correlated business semantic tags, resulting in the highest semantic similarity. The server establishes a compatible mapping, mapping "generated text content" to "positive suggestion words."The business semantic tags for "negative keywords in text" and "reverse suggestion words" are highly correlated and have the highest semantic similarity. The server establishes a compatible mapping relationship, mapping "negative keywords in text" to "reverse suggestion words." Similarly, the business semantic tags for "generation steps" and "iteration steps" are highly correlated and have the highest semantic similarity. The server establishes a compatible mapping relationship, mapping "generation steps" to "iteration steps." With all four parameters mapped, the output and input parameters between the text creation node and the text-generated image node are completely matched, eliminating the need for manual parameter configuration by the user.
[0103] In another specific example, the user selects an image super-resolution node in the downstream entry point on the right side of the text image node, with the entry point direction being downstream. The text image node is the upstream node, and the image super-resolution node is the downstream node. The server obtains the output parameter set of the text image node, including "Generate Image File" (image file type, "Generate Image File"), "Image Width" (integer type, "Image Width"), "Image Height" (integer type, "Image Height"), and "Image Color Space" (string type, "Image Color Space"). The server obtains the input parameter set of the image super-resolution node, including "Original Image to be Processed" (image file type, "Original Image to be Processed"), "Original Image Size" (string type, "Original Image Size"), and "Color Space Configuration" (string type, "Color Space Configuration"). The server iterates through the output parameter set and the input parameter set for matching. Although the parameter names "Generate Image File" and "Original Image to be Processed" are different, their parameter types (both are image file types) and business semantic tags (both represent the image to be processed) are highly related. No direct mapping relationship is established, but their semantic similarity is high. The parameters "Image Width" and "Image Height" have different names and types (integer and string, respectively) compared to "Original Image Size," making direct mapping impossible. However, they are highly related in terms of business semantics. Since no output parameter satisfies the condition that "all three are the same" with the input parameter, the server calculates semantic similarity and establishes a compatible mapping relationship: "Generate Image File" is mapped to "Original Image to be Processed," and the combination of "Image Width" and "Image Height" is mapped to "Original Image Size," with the format automatically converted to a string format of "width × height." For example, if the image width is 1024 pixels and the image height is 768 pixels, the value of "Original Image Size" is "1024 × 768." "Image Color Space" is mapped to "Color Space Configuration," with the format automatically converted to a string format. Once all three parameters are mapped, the user does not need to manually configure any parameters.
[0104] As can be seen, this embodiment achieves automatic mapping of upstream and downstream parameters through precise matching of parameter names, parameter types, and business semantic tags, as well as flexible matching based on semantic similarity. For parameters that match perfectly, a direct mapping relationship is established to ensure accuracy; for parameters that cannot be directly matched, a compatible mapping relationship is established through semantic similarity calculation to ensure comprehensiveness; and for parameters requiring format conversion, data format conversion is automatically performed to ensure data correctness. Users do not need to manually configure parameters repeatedly between upstream and downstream nodes, significantly reducing repetitive configuration workload and improving workflow setup efficiency.
[0105] It should be noted that when the current node has multiple output ports, each output port corresponds to a different output format. For example, a multimodal synthesis node may have both image format output ports and text format output ports. In this scenario, before obtaining the output parameter set of the current node and the input parameter set of the target node, the process may include: obtaining the port format information of each output port of the current node, where port format information refers to the data format type corresponding to each output port; classifying and displaying each candidate node in the candidate node list according to its format matching relationship with each output port based on the port format information, that is, each candidate node is categorized and displayed under the corresponding format category according to the output port format it can match, so that users can clearly see which output port format each candidate node is compatible with; and determining the starting point of the connection based on the target port in response to the user's selection operation for the target port and target node. Furthermore, obtaining the output parameter set of the current node and the input parameter set of the target node may also include: obtaining the output parameter set corresponding to the target port, thereby ensuring that the output parameter set on which subsequent parameter mapping is based matches the target port selected by the user. By providing the ability to categorize and display candidate nodes by port format for multi-output port nodes, users can clearly understand the types of nodes that can be connected to each output port, thus improving the accuracy of operations.
[0106] In one embodiment, the method further includes the following steps: S201: In response to the user's manual connection operation for the first node and the second node, obtain the first node type and first output format of the first node, and the second node type and second input format of the second node; S202: Based on the first node and the second node, detect whether the connection between the first node and the second node forms a directed closed loop in the workflow, and obtain the first detection result; S203: Based on the first node type and the second node type, detect whether the combination of the first node type and the second node type belongs to a preset connectable type combination, and obtain the second detection result; S204: Based on the first output format and the second input format, detect whether the first output format matches the second input format, and obtain the third detection result; S205: When the first, second, and third detection results are all passed, generate a connection between the first node and the second node; S206: When any of the first, second, and third detection results is a failure, the manual connection operation is intercepted, and an error feedback signal is generated based on the failed detection result.
[0107] As an example, a manual connection operation refers to the user dragging and dropping a line from the first node to the second node in the workflow canvas using the mouse or other interactive methods. The first node is the starting node of the manual connection, and the second node is the ending node. The first node type refers to the functional category to which the first node belongs, such as text creation, image generation, video generation, audio generation, or manual proofreading. The first output format refers to the data format type that the first node can output when acting as an upstream node, such as text, image, video, or audio. The second node type refers to the functional category to which the second node belongs. The second input format refers to the data format type that the second node can receive when acting as a downstream node. Preset connectable type combinations refer to the pre-configured combinations of node types that are allowed to establish connections.
[0108] When a user manually connects the first and second nodes in the workflow canvas by dragging and dropping, the server intercepts the operation and initiates a real-time compliance verification process. The server first obtains the first node type and first output format of the first node, and the second node type and second input format of the second node. Then, the server sequentially performs three progressive compliance checks.
[0109] The first step is topology compliance verification: The server checks whether the connection between the first and second nodes in the workflow, as well as the upstream and downstream dependencies between them, will create a directed loop in the workflow. A directed loop refers to a path that starts from a node, passes through several nodes along the connection, and returns to that node. For example, node A connects to node B, node B connects to node C, and node C connects to node A, forming a circular dependency. If a directed loop is formed, the workflow will get stuck in an infinite loop and cannot complete normally. If the connection is detected to create a directed loop, the first check result is "fail"; if it does not create a directed loop, the first check result is "pass".
[0110] The second step is node type compliance verification: The server checks whether the combination of the first and second node types belongs to a preset connectable type combination. The preset connectable type combination specifies which node types are allowed to establish connections. For example, direct connections are not supported between material input nodes because material input nodes are all data sources for the workflow, and there is no need for data flow between data sources of the same type; manual proofreading nodes are not supported to connect to each other because proofreading nodes are process termination nodes, and multiple termination nodes connected in series have no business significance; downstream of terminal nodes, no nodes are supported because terminal nodes are the end of the workflow, and no subsequent nodes need to be executed. If the combination of the first and second node types does not belong to the preset connectable type combination, the second detection result is a failure; if it belongs to the preset connectable type combination, the second detection result is a pass.
[0111] The third step is format compatibility verification: The server checks whether the first output format and the second input format match. If the first output format and the second input format are completely identical in data type (e.g., text format with text format, image format with image format), then the format matches. If the first output format and the second input format are inconsistent in data type and data transfer cannot be achieved through special adaptation rules, then the format does not match. If the format does not match, the third check result is "fail"; if the format matches, the third check result is "pass".
[0112] When all three checks pass, the server generates a connection between the first and second nodes, completing the manual connection operation. If any of the three checks fails, the server blocks the manual connection operation, does not generate a connection, and generates an error feedback signal based on the failed check result. This error feedback signal contains information about the type of check that caused the verification failure.
[0113] In a specific example, a user attempts to drag a connection from the output of a text creation node to the input of a text-to-image node. The first node is a text creation node, and the second node is a text-to-image node. The server obtains the first node's first node type as "Text Creation Type" and its first output format as "Text Format," and the second node's second node type as "Image Generation Type" and its second input format as "Text Format." The server performs a topology compliance check, detecting that there is no existing reverse path between the text creation node and the text-to-image node, meaning the connection will not form a directed closed loop; the first check is passed. The server performs a node type compliance check, detecting that the combination of "Text Creation Type" and "Image Generation Type" belongs to a preset connectable type combination; the second check is passed. The server performs a format compatibility check, detecting that the first output format "Text Format" and the second input format "Text Format" are completely identical; the format matches; the third check is passed. With all three checks passed, the server generates a connection between the text creation node and the text-to-image node.
[0114] In another specific example, a user attempts to drag a connection from the output of a manual proofreading node to the input of a text creation node. The first node is a manual proofreading node, and the second node is a text creation node. The server obtains that the first node's first node type is "Manual Proofreading Type" and its first output format is "Text Format," and the second node's second node type is "Text Creation Type" and its second input format is "Text Format." The server performs a topology compliance check and detects that the connection will not form a directed closed loop, so the first check result is passed. The server performs a node type compliance check and detects that the manual proofreading node's type is a termination node type. Its connection to a functional node as an upstream node does not conform to the business flow rules; that is, the combination of "Manual Proofreading Type" and "Text Creation Type" does not belong to the preset connectable type combination, so the second check result is failed. The server no longer performs format compatibility checks, directly intercepts the manual connection operation, and generates an error feedback signal based on the second check result being failed.
[0115] In another specific example, a user attempts to drag and drop a connection from the output of a text creation node to the input of an audio synthesis node. The first node is a text creation node, and the second node is an audio synthesis node. The server obtains the first output format of the first node as "text format" and the second input format of the second node as "audio format". The server performs a topology compliance check, and the first check result is passed. The server performs a node type compliance check, and the combination of "text creation type" and "audio synthesis type" belongs to the preset connectable type combination, so the second check result is passed. The server performs a format compatibility check, and detects that the first output format "text format" and the second input format "audio format" are inconsistent, resulting in a format mismatch, and the third check result is failed. The server intercepts this manual connection operation and generates an error feedback signal based on the third check result of failing, prompting the user that "the output format text and the input format audio do not match. Please check the node configuration or select a format-compatible node."
[0116] As can be seen, this embodiment ensures the legitimacy of manual connection operations by performing a triple progressive check on topology compliance, node type compliance, and format compatibility. When checks fail, illegal connection operations are directly blocked, preventing issues such as execution loops, node type mismatches, and format mismatches caused by manual connections from the outset, thus guaranteeing the correctness and stability of the workflow. Simultaneously, by generating error feedback signals, a data foundation is provided for subsequently offering clear and visual error messages to users, reducing the time cost for users to troubleshoot problems.
[0117] In one embodiment, after intercepting the manual connection operation and generating an error feedback signal based on the failed detection result, the method further includes the following steps: S207: Analyze the error feedback signal to obtain the type of failure. S208: Based on the type of failure, overlay a rendering prompt message layer on the workflow canvas. The prompt message layer contains text description information corresponding to the type of failure.
[0118] As an example, "failed detection type" refers to the type of detection item that causes manual connection verification to fail, including topology loop closure type, node type mismatch type, and format mismatch type. "Error feedback signal" refers to a signal generated by the server after intercepting a manual connection operation, containing information about the failed detection type. "Prompt information layer" refers to a layer of prompt information overlaid on the canvas, used to inform the user of the reason for the operation failure and the correct operation guidance. This layer is rendered on top of the canvas content, forming a layered relationship with the canvas content.
[0119] When a manual connection operation is intercepted and an error feedback signal is generated, the server further processes the error feedback signal to provide the user with clear visual feedback. The server parses the error feedback signal and extracts the type of failure. Then, based on the type of failure, the server overlays a rendering prompt message layer on the workflow canvas. This prompt message layer contains text description information corresponding to the type of failure. Specifically: when the failure type is a topology loop type, the text description is "This connection will cause the workflow to form a loop; please reselect the connection target"; when the failure type is a node type mismatch type, the text description is "The starting node type and the ending node type do not support direct connection; please add an intermediate processing node"; when the failure type is a format mismatch type, the text description is "The upstream node output format and the downstream node input format do not match; please select a compatible node." The prompt message layer disappears automatically after a preset display duration, or disappears in response to the user's close operation.
[0120] In a specific example, a user attempts to drag a connection from the manual proofreading node to the text creation node. The server performs triple checks (S201-S206) to intercept the operation and generate an error feedback signal. The server then executes S207, parses the error feedback signal, and determines the failure type as "node type mismatch." The server executes S208, overlaying a warning message layer onto the workflow canvas based on the "node type mismatch" type. This warning message layer contains the text description "The manual proofreading node is a process completion node and cannot be used as an upstream node to connect to functional nodes." This warning message layer is rendered at the top of the canvas with a semi-transparent background and prominent font, disappearing automatically after 3 seconds. During this time, the user can see the reason for the operation failure and the correct operation instructions.
[0121] In another specific example, a user attempts to drag a connection from the output of a text creation node to the input of an audio synthesis node. The server intercepts this operation and generates an error feedback signal. The server parses the error feedback signal and determines that the failure type is "format mismatch." The server overlays a rendering message layer on the canvas, displaying "The upstream node's output format is text, and the downstream node's input format is audio. The formats do not match. Please select a compatible node." In addition to the text description, the message layer also labels the names of the first and second nodes, helping the user quickly locate the problematic node.
[0122] In another specific example, a user attempts to drag a connection from the second node to the first node. This connection will form a reverse loop, and the server intercepts the operation and generates an error feedback signal. The server parses the error feedback signal and determines that the failure type is "Topology Loop Type." The server overlays a warning message layer on the canvas, displaying "This connection will cause the workflow to form a loop; please reselect the connection target." The warning message layer also displays the additional explanation, "The current workflow will enter a loop; please remove the loop connection."
[0123] As can be seen, in this embodiment, by parsing the error feedback signal after intercepting the manual connection operation and overlaying a prompt information layer containing corresponding text descriptions based on the type of failure, users can clearly understand the specific reason for the operation failure and the correct operation guidance. Topology loop closure, node type mismatch, and format mismatch types each correspond to different text descriptions. The prompts are clear, specific, and targeted, allowing users to quickly understand the problem and take the correct action without having to troubleshoot the error themselves. This reduces learning costs and troubleshooting time, improving workflow setup efficiency and user experience. Furthermore, the prompt information layer is overlaid on the canvas, without affecting the original layout of the canvas content, and automatically disappears after a preset display time, without interfering with subsequent user operations, providing a good user experience.
[0124] In one embodiment, the following steps are also included: S301: In response to a disable or lock command for the current node, gray out the first add entry and the second add entry; S302: Intercept manual connection operations targeting the current node.
[0125] As an example, a disable command is used to prevent the current node from executing. Once disabled, the node no longer performs its functional logic but remains on the canvas. A lock command is used to lock the current node, making it uneditable. Once locked, no configuration modifications are allowed. Graying out the first and second add entry buttons means rendering them grayed out and unavailable, preventing users from clicking them to trigger the node addition operation. Intercepting manual connection operations for the current node prevents users from dragging connections from the output of this node to the input of other nodes, and also prevents users from dragging connections from the output of other nodes to the input of this node. The current node can be any of the following: a material input node, a function node, or a process node.
[0126] When a user performs a disable or lock operation on the current node, the server detects the instruction and immediately grays out the first and second add entries for the current node. At the same time, it intercepts all manual connection operations for the current node. That is, when the user tries to drag a connection from the current node to any other node in the canvas, the drag operation cannot form a valid connection, and the connection is invalid and unusable.
[0127] In a specific example, the content administrator locks the Wensheng Image node. In response to this lock command, the server changes the color of the first and second add entry buttons on the Wensheng Image node from the available blue to a gray, unavailable state. The two add entry buttons no longer respond to mouse click events, preventing users from adding any upstream or downstream nodes by clicking either the first or second add entry. Simultaneously, the server blocks manual connection operations for this Wensheng Image node; users cannot drag and drop connections from the output of this Wensheng Image node to the input of other nodes, nor can they drag and drop connections from the output of other nodes to the input of this Wensheng Image node.
[0128] In another specific example, the content administrator executes a disable command on the text material input node. In response to this disable command, the server grays out the first and second add entries for the text material input node, preventing users from adding nodes through these entries. Simultaneously, the server blocks all manual connection operations for this text material input node, including manual connections originating from this node and manual connections from other nodes to this node.
[0129] As can be seen, in this embodiment, by graying out the first and second add entry points and blocking manual connection operations when a node is disabled or locked, invalid node add or connection operations by users are avoided on disabled or locked nodes, thereby avoiding invalid workflow construction and ensuring workflow stability.
[0130] 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.
[0131] It should be noted that the specific values mentioned in the above embodiments (e.g., a standard horizontal spacing of 150 pixels) are merely exemplary values set for the convenience of describing and understanding this embodiment, and do not constitute a limitation or actual value of this application.
[0132] Secondly, embodiments of this application provide a node connection processing device based on a workflow canvas, which corresponds one-to-one with the node connection processing method based on a workflow canvas in the above embodiments. For example... Figure 5As shown, the workflow canvas-based node connection processing device includes a rendering module 401, an acquisition module 402, a generation module 403, a creation module 404, and an establishment module 405. Detailed descriptions of each functional module are as follows: The rendering module 401 is used to render a first addition entry and a second addition entry on both sides of the current node, respectively. The first addition entry is used to trigger the upstream node addition process, and the second addition entry is used to trigger the downstream node addition process. The acquisition module 402 is used to acquire the node attribute information of the current node in response to a trigger operation for the first add entry or the second add entry; The generation module 403 is used to generate a candidate node list based on the addition entry direction corresponding to the trigger operation and the node attribute information; A creation module 404 is configured to create the target node on the corresponding side of the current node in response to a selection operation for a target node in the candidate node list; wherein, when the triggering operation is to trigger the first add entry, the corresponding side is the left side, and when the triggering operation is to trigger the second add entry, the corresponding side is the right side; Module 405 is used to establish a connection between the current node and the target node according to the direction of the added entry.
[0133] In one embodiment, the rendering module 401 is further configured to: Obtain the service type identifier of the current node; When the business type is identified as the starting node type, the second add entry is only rendered to the right of the current node; When the business type is identified as an intermediate processing node type, the first add entry is rendered on the left side of the current node, and the second add entry is rendered on the right side of the current node; When the business type is identified as a termination node type, the first add entry is rendered only on the left side of the current node.
[0134] In one embodiment, the node attribute information includes node type information and format information, wherein the format information includes input format and output format; The generation module 403 is further configured to: Based on the added entry direction, flow direction matching nodes are selected from a preset node set; wherein, when the added entry direction is upstream, the flow direction matching node is a node whose output end can be connected to the input end of the current node, and when the added entry direction is downstream, the flow direction matching node is a node whose input end can be connected to the output end of the current node; Based on the node type information, type-compliant nodes are selected from the flow matching nodes, and the upstream and downstream topological relationship between the type-compliant nodes and the current node conforms to the rules of a directed acyclic graph. Based on the format information, candidate nodes in the candidate node list are selected from the type compliance nodes; wherein, when the format information is the input format, the candidate node is a type compliance node whose output format matches the input format of the current node; when the format information is the output format, the candidate node is a type compliance node whose input format matches the output format of the current node.
[0135] In one embodiment, the creation module 404 is further configured to: Obtain the X-axis coordinate, Y-axis coordinate, width value, and standard horizontal spacing of the current node; When the corresponding side is the right side, calculate the sum of the X-axis coordinate, the width value, and the standard horizontal spacing as the initial X-axis coordinate of the target node, use the Y-axis coordinate as the initial Y-axis coordinate of the target node, and create the target node to the right of the current node based on the initial X-axis coordinate and the initial Y-axis coordinate. When the corresponding side is the left side, calculate the difference between the X-axis coordinate, the width value, and the standard horizontal spacing, and use it as the initial X-axis coordinate of the target node. Use the Y-axis coordinate as the initial Y-axis coordinate of the target node, and create the target node to the left of the current node based on the initial X-axis coordinate and the initial Y-axis coordinate.
[0136] In one embodiment, the node connection processing device further includes a detection module (not shown in the figure). The detection module is used for: Obtain the target rectangular region of the target node, which is formed by the x-coordinate of the top left corner vertex, the y-coordinate of the top left corner vertex, the node width value, and the node height value of the target node on the workflow canvas; Traverse the rectangular regions of existing nodes in the workflow canvas, and detect whether there is an overlapping region based on the target rectangular region and the rectangular regions of existing nodes, or detect whether the distance between the target rectangular region and the rectangular regions of existing nodes is less than a preset safety distance. When the overlapping area is detected or the spacing is less than the preset safety spacing, the collision node is determined according to the existing nodes that have collided, and the collision direction is determined according to the orientation of the collision node relative to the target node. The displacement is calculated based on the collision direction and the node size of the collision node; According to the displacement, the collision node and all associated nodes at the same topological level as the collision node are translated in batches.
[0137] In one embodiment, the establishment module 405 is further configured to: Obtain the degree of matching between the output format of the current node and the input format of the target node; The rendering color is determined based on the matching degree: when the matching degree is a perfect match, the rendering color of the connection is determined as the first color; when the matching degree is a compatible match, the rendering color of the connection is determined as the second color. When the direction of adding the entry is downstream, a third-order Bézier curve path is generated based on the coordinates of the output anchor point of the current node and the coordinates of the input anchor point of the target node, and the connection between the output anchor point of the current node and the input anchor point of the target node is rendered according to the rendering color and the third-order Bézier curve path. When the added entry direction is upstream, a third-order Bézier curve path is generated based on the output anchor point coordinates of the target node and the input anchor point coordinates of the current node, and the connection between the output anchor point of the target node and the input anchor point of the current node is rendered according to the rendering color and the third-order Bézier curve path.
[0138] In one embodiment, the node connection processing device further includes a conversion module (not shown in the figure). The conversion module is used for: Based on the direction of the added entry, determine the upstream and downstream dependencies between the current node and the target node; When the upstream and downstream dependency relationship is such that the current node is an upstream node and the target node is a downstream node, obtain the output parameter set of the current node and the input parameter set of the target node; Iterate through the set of output parameters and take one output parameter from it as the current output parameter; Iterate through the set of input parameters and extract one input parameter from it as the current input parameter; When the parameter name, parameter type, and business semantic tag of the current output parameter are all the same as the parameter name, parameter type, and business semantic tag of the current input parameter, a direct mapping relationship is established between the current output parameter and the current input parameter. When all output parameters in the output parameter set have been traversed and no direct mapping relationship has been established for any of them, the semantic similarity between each output parameter and each input parameter is calculated. Based on the semantic similarity calculation results, a compatible mapping relationship is established between the output parameter with the highest semantic similarity and the input parameter; Based on the compatibility mapping relationship, the data format of the output parameters is converted to be consistent with the input format of the input parameters.
[0139] It should be noted that, in order to avoid redundancy, the embodiments of this application only list some steps of the node connection processing method based on the workflow canvas in the first aspect above, and do not list all the steps of the node connection processing method based on the workflow canvas in the second aspect embodiments.
[0140] It should be understood that the node connection processing device based on the workflow canvas in the second aspect embodiment can implement all the steps of the node connection processing method based on the workflow canvas in the first aspect embodiment, and will not be repeated here.
[0141] Specific limitations regarding the workflow canvas-based node connection processing device can be found in the limitations of the workflow canvas-based node connection processing method described above, and will not be repeated here. Each module in the aforementioned workflow canvas-based node connection processing device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in hardware or independently of the processor in the electronic device, or stored in software in the memory of the electronic device, so that the processor can call and execute the corresponding operations of each module.
[0142] Thirdly, embodiments of this application provide an electronic device whose internal structure diagram can be as follows: Figure 6 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 the data required to execute the workflow canvas-based node connection processing 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 workflow canvas-based node connection processing method described above.
[0143] 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 workflow canvas-based node connection processing method described in the first aspect above.
[0144] 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 workflow canvas-based node connection processing method described in the first aspect.
[0145] 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.
[0146] 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. When executed, the computer program 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 may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of 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.
[0147] 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.
[0148] 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 node connection processing method based on a workflow canvas, characterized in that, include: The first add entry and the second add entry are rendered on both sides of the current node, respectively. The first add entry is used to trigger the add process of the upstream node, and the second add entry is used to trigger the add process of the downstream node. In response to a trigger operation targeting the first or second add entry point, obtain the node attribute information of the current node; Based on the entry direction corresponding to the triggering operation and the node attribute information, a candidate node list is generated; In response to a selection operation for a target node in the candidate node list, the target node is created on the corresponding side of the current node; wherein, when the triggering operation is to trigger the first add entry, the corresponding side is the left side, and when the triggering operation is to trigger the second add entry, the corresponding side is the right side; Based on the direction of the added entry, establish a connection between the current node and the target node.
2. The method according to claim 1, characterized in that, The step of rendering the first add entry and the second add entry on both sides of the current node respectively includes: Obtain the service type identifier of the current node; When the business type is identified as the starting node type, the second add entry is rendered only to the right of the current node; When the business type is identified as an intermediate processing node type, the first add entry is rendered on the left side of the current node, and the second add entry is rendered on the right side of the current node; When the business type is identified as a termination node type, the first add entry is rendered only on the left side of the current node.
3. The method according to claim 1, characterized in that, The node attribute information includes node type information and format information, and the format information includes input format and output format. The step of generating a candidate node list based on the entry direction corresponding to the triggering operation and the node attribute information includes: Based on the added entry direction, flow direction matching nodes are selected from a preset node set; wherein, when the added entry direction is upstream, the flow direction matching node is a node whose output end can be connected to the input end of the current node, and when the added entry direction is downstream, the flow direction matching node is a node whose input end can be connected to the output end of the current node; Based on the node type information, type-compliant nodes are selected from the flow matching nodes, and the upstream and downstream topological relationship between the type-compliant nodes and the current node conforms to the rules of a directed acyclic graph. Based on the format information, candidate nodes in the candidate node list are selected from the type compliance nodes; wherein, when the format information is the input format, the candidate node is a type compliance node whose output format matches the input format of the current node; when the format information is the output format, the candidate node is a type compliance node whose input format matches the output format of the current node.
4. The method according to claim 1, characterized in that, Creating the target node on the corresponding side of the current node includes: Obtain the X-axis coordinate, Y-axis coordinate, width value, and standard horizontal spacing of the current node; When the corresponding side is the right side, calculate the sum of the X-axis coordinate, the width value, and the standard horizontal spacing as the initial X-axis coordinate of the target node, use the Y-axis coordinate as the initial Y-axis coordinate of the target node, and create the target node to the right of the current node based on the initial X-axis coordinate and the initial Y-axis coordinate. When the corresponding side is the left side, calculate the difference between the X-axis coordinate, the width value, and the standard horizontal spacing, and use it as the initial X-axis coordinate of the target node. Use the Y-axis coordinate as the initial Y-axis coordinate of the target node, and create the target node to the left of the current node based on the initial X-axis coordinate and the initial Y-axis coordinate.
5. The method according to claim 1, characterized in that, After creating the target node on the corresponding side of the current node, the process further includes: Obtain the target rectangular region of the target node, which is formed by the x-coordinate of the top left corner vertex, the y-coordinate of the top left corner vertex, the node width value, and the node height value of the target node on the workflow canvas; Traverse the rectangular regions of existing nodes in the workflow canvas, and detect whether there is an overlapping region based on the target rectangular region and the rectangular regions of existing nodes, or detect whether the distance between the target rectangular region and the rectangular regions of existing nodes is less than a preset safety distance. When the overlapping area is detected or the spacing is less than the preset safety spacing, the collision node is determined according to the existing nodes that have collided, and the collision direction is determined according to the orientation of the collision node relative to the target node. The displacement is calculated based on the collision direction and the node size of the collision node; According to the displacement, the collision node and all associated nodes at the same topological level as the collision node are translated in batches.
6. The method according to claim 1, characterized in that, The step of establishing a connection between the current node and the target node according to the added entry direction includes: Obtain the matching degree between the output format of the current node and the input format of the target node; The rendering color is determined based on the matching degree: when the matching degree is a perfect match, the rendering color of the connection is determined as the first color; when the matching degree is a compatible match, the rendering color of the connection is determined as the second color. When the direction of adding the entry is downstream, a third-order Bézier curve path is generated based on the coordinates of the output anchor point of the current node and the coordinates of the input anchor point of the target node, and the connection between the output anchor point of the current node and the input anchor point of the target node is rendered according to the rendering color and the third-order Bézier curve path. When the added entry direction is upstream, a third-order Bézier curve path is generated based on the output anchor point coordinates of the target node and the input anchor point coordinates of the current node, and the connection between the output anchor point of the target node and the input anchor point of the current node is rendered according to the rendering color and the third-order Bézier curve path.
7. The method according to claim 1, characterized in that, After establishing the connection between the current node and the target node according to the added entry direction, the method further includes: Based on the direction of the added entry, determine the upstream and downstream dependencies between the current node and the target node; When the upstream and downstream dependency relationship is such that the current node is an upstream node and the target node is a downstream node, obtain the output parameter set of the current node and the input parameter set of the target node; Iterate through the set of output parameters and take one output parameter from it as the current output parameter; Iterate through the set of input parameters and extract one input parameter from it as the current input parameter; When the parameter name, parameter type, and business semantic tag of the current output parameter are all the same as the parameter name, parameter type, and business semantic tag of the current input parameter, a direct mapping relationship is established between the current output parameter and the current input parameter. When all output parameters in the output parameter set have been traversed and no direct mapping relationship has been established for any of them, the semantic similarity between each output parameter and each input parameter is calculated. Based on the semantic similarity calculation results, a compatible mapping relationship is established between the output parameter with the highest semantic similarity and the input parameter; Based on the compatibility mapping relationship, the data format of the output parameters is converted to be consistent with the input format of the input parameters.
8. A node connection processing device based on a workflow canvas, characterized in that, include: The rendering module is used to render the first addition entry and the second addition entry on both sides of the current node, respectively. The first addition entry is used to trigger the upstream node addition process, and the second addition entry is used to trigger the downstream node addition process. The acquisition module is used to acquire the node attribute information of the current node in response to a trigger operation for the first add entry or the second add entry; The generation module is used to generate a candidate node list based on the entry direction corresponding to the triggering operation and the node attribute information; A creation module is configured to create the target node on the corresponding side of the current node in response to a selection operation for a target node in the candidate node list; wherein, when the triggering operation is to trigger the first add entry, the corresponding side is the left side, and when the triggering operation is to trigger the second add entry, the corresponding side is the right side; A module is established to create a connection between the current node and the target node based on the direction of the added entry.
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 connection processing method based on the workflow canvas 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 workflow canvas-based node connection processing method as described in any one of claims 1 to 7.
