Angle-based flow chart editor implementation method

Abstract

The invention discloses an Angle-based flow chart editor implementation method, which relates to the technical field of computers, and comprises the following steps: step 1, adding various node template components of a flow chart editor, step 2, adding a node information editing component of the flow chart editor, step 3, defining a verification rule and a packaging method of the flow chart editor, 4, integrating various node template components, configuring a draggable toolbar of a flow chart editor, and enabling a user to drag required nodes to canvas from the toolbar by using a mouse, and 5, packaging a connection method, establishing connection among the nodes through mouse dragging, monitoring a mouse dragging event, adding the dragged nodes at a drop point, connecting directed flow lines, and completing the operation of the flow chart editor. 6, a canvas model is established, and a flow chart is drawn on the canvas model; and 7, node data ordering processing is performed on the edited flow chart.

Description

Technical Field

[0001] The present invention discloses a method for implementing a flowchart editor based on Angular, which relates to the field of computer technology. Background Art

[0002] The flowchart editor developed based on the native javascript in accordance with the ES5 standard has problems such as poor compatibility, high coupling, and high redundancy, and there are many inconveniences in implementation, operation and maintenance, and reuse. In addition, the existing flowchart editor creates nodes by clicking, with poor interactivity, a rigid flowchart drawing process, and a complex modification process; and it lacks extended flowchart functions such as concurrency and branching. Summary of the Invention

[0003] In view of the problems of the prior art, the present invention provides a method for implementing a flowchart editor based on Angular, which uses the two-way data binding of angular and object-oriented programming in typescript to reduce the direct operation on the dom and improve the response efficiency of the flowchart editor; the node information is sorted and saved for subsequent use in designing processes using the flowchart data.

[0004] The specific solution proposed by the present invention is as follows:

[0005] The present invention provides a method for implementing a flowchart editor based on Angular, including:

[0006] Step 1: Add various node template components for the flowchart editor,

[0007] Step 2: Add a node information editing component for the flowchart editor,

[0008] Step 3: Define the verification rules and encapsulation methods for the flowchart editor,

[0009] Step 4: Integrate various node template components, configure the draggable toolbar of the flowchart editor, and enable the user to drag the required nodes from the toolbar to the canvas with the mouse,

[0010] Step 5: Encapsulate the connection method, establish a connection between nodes by dragging the mouse, where the mouse drag event is listened to, and the dragged node is added at the drop point, and a directed flow line is connected,

[0011] Step 6: Establish a canvas model and draw a flowchart on the canvas model,

[0012] Step 7: Perform an orderly processing on the node data of the edited flowchart.

[0013] Further, in step 1 of the method for implementing a flowchart editor based on Angular, the nodes involved in various node template components are divided into start nodes, end nodes, parallel gateways, convergence gateways, branch gateways, and task nodes.

[0014] Further, in step 2 of the method for implementing a flowchart editor based on Angular, a pop-up window and / or drawer display form is used to display the node information editing component, and the node name, step name, input parameters, and output parameter information are collected through the node information editing component.

[0015] Further, the verification rules defined for the flowchart editor in step 3 of the method for implementing a flowchart editor based on Angular include: setting corresponding verification methods according to the node type to determine whether a node is allowed to be added; when connecting nodes, judging whether two nodes can be connected according to the node type and logic.

[0016] Further, in step 5 of the method for implementing a flowchart editor based on Angular, based on the flow line, a deletion instruction is received, and the corresponding content of the flow line is deleted from the flowchart; according to the node receiving the deletion instruction, the node together with the flow line connecting the node is deleted from the flowchart.

[0017] The present invention also provides an apparatus for implementing a flowchart editor based on Angular, including a component management module, a rule management module, an integration configuration module, a flow line management module, a drawing module, and a processing module.

[0018] The component management module adds various node template components of the flowchart editor and adds a node information editing component of the flowchart editor.

[0019] The rule management module defines the verification rules and encapsulation methods of the flowchart editor.

[0020] The integration configuration module integrates various node template components, configures the draggable toolbar of the flowchart editor, and enables the user to drag the required nodes from the toolbar to the canvas with the mouse.

[0021] The flow line management module encapsulates the connection method, establishes a connection between nodes by dragging the mouse, where the mouse drag event is monitored, and the dragged node is added at the drop point, and a directed flow line is connected.

[0022] The drawing module establishes a canvas model and draws a flowchart on the canvas model.

[0023] The processing module performs an ordering process on the node data of the edited flowchart.

[0024] Further, the various node template components newly added by the component management module of the described flowchart editor implementation device based on Angular involve nodes divided into start nodes, end nodes, parallel gateways, convergence gateways, branch gateways, and task nodes.

[0025] Further, the component management module of the described flowchart editor implementation device based on Angular uses a pop-up window and / or drawer display form to display the node information editing component, and collects node name, step name, input parameter, and output parameter information through the node information editing component.

[0026] Further, the verification rules of the flowchart editor defined by the rule management module of the described flowchart editor implementation device based on Angular include: setting corresponding verification methods according to the node type to determine whether a node is allowed to be added; when connecting lines between nodes, judging whether two nodes can be connected according to the node type and logic.

[0027] Further, based on the flow line, the flow line management module of the described flowchart editor implementation device based on Angular receives a deletion instruction and deletes the corresponding content of the flow line from the flowchart; according to the node receiving the deletion instruction, the node together with the flow line connecting the node is deleted from the flowchart.

[0028] The beneficial effects of the present invention are:

[0029] Nodes can be newly added and flow lines can be connected by dragging with the mouse, having good interactivity. Elements on the canvas are all allowed to be dragged and deleted, facilitating the modification of the flowchart; implemented with Angular, two-way binding and componentization avoid directly operating on dom elements, separating each module, facilitating extension and reuse. The whole process is completed through engineering componentization, realizing the rule verification and rapid generation of the flowchart. Description of the Drawings

[0030] Figure 1 It is a schematic diagram of the method flow of the present invention.

[0031] Figure 2 It is a schematic diagram of the specific operation process of the connection line of the method of the present invention. Detailed Embodiment

[0032] The Angular framework has characteristics such as modularity, MVC, dependency injection, semantic tags, two-way data binding, and typescript object-oriented programming; dependency injection, semantic tags, and object-oriented programming make it have better readability, while modularity and MVC make its development efficiency higher and have good refactoring ability, facilitating later maintenance and reuse.

[0033] The present invention will be further described below in conjunction with the accompanying drawings and specific embodiments, so that those skilled in the art can better understand the present invention and be able to implement it, but the embodiments given are not intended to limit the present invention.

[0034] Embodiment 1

[0035] The present invention provides a method for implementing a flowchart editor based on Angular, including:

[0036] Step 1: Add various node template components for the flowchart editor.

[0037] Among them, the nodes involved in the various node template components are divided into start nodes, end nodes, parallel gateways, convergence gateways, branch gateways, and task nodes.

[0038] Step 2: Add a node information editing component for the flowchart editor. The node information editing component can be presented in the form of a pop-up window and / or a drawer, and the node name, step name, input parameters, and output parameter information are collected through the node information editing component.

[0039] Step 3: Define the verification rules and encapsulation methods for the flowchart editor. The verification rules defined for the flowchart editor include: setting corresponding verification methods according to the node type to determine whether a node is allowed to be added. For example, only one start node and one end node are allowed in a flowchart; when connecting nodes, it is judged whether two nodes can be connected according to the node type and logic. For example, a parallel gateway and a branch gateway cannot be connected to an end node.

[0040] Step 4: Integrate various node template components, configure the draggable toolbar of the flowchart editor, and enable the user to drag the required nodes from the toolbar to the canvas with the mouse.

[0041] Step 5: Encapsulate the connection method, establish a connection between nodes by dragging the mouse, where the mouse drag event is monitored, and the dragged node is added at the drop point, and a directed process line is connected. Based on the process line, a deletion instruction is received, and the corresponding content of the process line is deleted from the flowchart; according to the node receiving the deletion instruction, the node together with the process line connecting the node is deleted from the flowchart.

[0042] Step 6: Establish a canvas model and draw a flowchart on the canvas model.

[0043] Step 7: Perform an ordering process on the node data of the edited flowchart.

[0044] Embodiment 2

[0045] The present invention also provides an implementation device for a flowchart editor based on Angular, including a component management module, a rule management module, an integration configuration module, a flow line management module, a drawing module, and a processing module.

[0046] The component management module adds various node template components of the flowchart editor and adds node information editing components of the flowchart editor.

[0047] The rule management module defines the verification rules and encapsulation methods of the flowchart editor.

[0048] The integration configuration module integrates various node template components, configures the draggable toolbar of the flowchart editor, and enables users to drag the required nodes from the toolbar to the canvas with the mouse.

[0049] The flow line management module encapsulates the connection method, establishes connections between nodes by dragging with the mouse, listens for the mouse drag event, adds the dragged node at the drop point, and connects the directed flow line.

[0050] The drawing module establishes a canvas model and draws a flowchart on the canvas model.

[0051] The processing module performs an orderly processing of the node data of the edited flowchart.

[0052] Regarding the information interaction, execution process, etc. among the above-mentioned device modules, since they are based on the same concept as the method embodiment of the present invention, the specific content can be referred to the description in the method embodiment of the present invention, and will not be elaborated here.

[0053] Similarly, the device of the present invention can add nodes and connect flow lines by dragging with the mouse, and has good interactivity. All elements on the canvas are allowed to be dragged and deleted, which is convenient for modifying the flowchart; implemented by Angular, two-way binding and componentization avoid directly operating on dom elements, separate each module, and are convenient for extension and reuse. The whole process is completed through engineering componentization, realizing the rule verification and rapid generation of the flowchart.

[0054] It should be noted that not all steps and modules in the above-mentioned processes and device structures are necessary, and some steps or modules can be ignored according to actual needs. The execution order of each step is not fixed and can be adjusted according to needs. The system structures described in the above-mentioned embodiments can be physical structures or logical structures, that is, some modules may be implemented by the same physical entity, or some modules may be implemented separately by multiple physical entities, or some components in multiple independent devices may be jointly implemented.

[0055] The above-described embodiments are merely preferred embodiments given to fully illustrate the present invention, and the protection scope of the present invention is not limited thereto. Equivalent substitutions or transformations made by those skilled in the art of this technology on the basis of the present invention are all within the protection scope of the present invention. The protection scope of the present invention shall be subject to the claims.

Claims

1. A method for implementing a flowchart editor based on Angular, characterized in that Including: Step 1: Add various node template components for the flowchart editor. Step 2: Add a node information editing component for the flowchart editor. Step 3: Define the verification rules and encapsulation methods for the flowchart editor. Step 4: Integrate various node template components, configure the draggable toolbar of the flowchart editor, and enable users to drag the required nodes from the toolbar to the canvas with the mouse. Step 5: Encapsulate the connection method, establish connections between nodes by dragging the mouse, where the mouse drag event is listened for, the dragged node is added at the drop point, and a directed process line is connected. Step 6: Establish a canvas model and draw a flowchart on the canvas model. Step 7: Perform an orderly processing of the node data for the edited flowchart.

2. A method for implementing a flowchart editor based on Angular according to claim 1, wherein the nodes involved in the various node template components in Step 1 are divided into start nodes, end nodes, parallel gateways, convergence gateways, branch gateways, and task nodes.

3. A method for implementing a flowchart editor based on Angular according to claim 1, wherein the node information editing component is presented in a pop-up window and / or drawer display form in Step 2, and node name, step name, input parameters, and output parameter information are collected through the node information editing component.

4. The implementation method of a flowchart editor based on Angular according to claim 1, characterized in that The verification rules defined in Step 3 for the flowchart editor include: setting corresponding verification methods according to the node type to determine whether a node is allowed to be added; and judging whether two nodes can be connected according to the node type and logic when connecting nodes.

5. A method for implementing a flowchart editor based on Angular according to claim 1, characterized in that In Step 5, based on the process line, receive a deletion instruction and delete the corresponding content of the process line from the flowchart. According to the node receiving the deletion instruction, delete the node together with the process line connecting the node from the flowchart.

6. An implementation device of a flowchart editor based on Angular, characterized in that Including a component management module, a rule management module, an integration configuration module, a process line management module, a drawing module, and a processing module. The component management module adds various node template components for the flowchart editor and adds a node information editing component for the flowchart editor. The rule management module defines the verification rules and encapsulation methods for the flowchart editor. The integration configuration module integrates various node template components, configures the draggable toolbar of the flowchart editor, and enables users to drag the required nodes from the toolbar to the canvas with the mouse. The process line management module encapsulates the connection method, establishes connections between nodes by dragging the mouse, where the mouse drag event is listened for, the dragged node is added at the drop point, and a directed process line is connected. The drawing module establishes a canvas model and draws a flowchart on the canvas model. The processing module performs an orderly processing of the node data for the edited flowchart.

7. The apparatus for implementing a flowchart editor based on Angular according to claim 6, wherein The nodes involved in the various node template components added by the component management module are divided into start nodes, end nodes, parallel gateways, convergence gateways, branch gateways, and task nodes.

8. The device for implementing a flowchart editor based on Angular according to claim 6, characterized in that The component management module presents the node information editing component in a pop-up window and / or drawer display form, and node name, step name, input parameters, and output parameter information are collected through the node information editing component.

9. The apparatus for implementing a flowchart editor based on Angular according to claim 6, wherein The verification rules of the flowchart editor defined by the rule management module include: setting corresponding verification methods according to the node type to determine whether a node is allowed to be added; when connecting nodes, judging whether two nodes can be connected according to the node type and logic.

10. The apparatus for implementing a flowchart editor based on Angular according to claim 6, characterized in that Based on the process line, the process line management module receives a deletion instruction and deletes the corresponding content of the process line from the flowchart; Receiving a deletion instruction according to the node, the node and the process line connecting the node are deleted from the flowchart together.

Images