Flow chart node adding and displaying method, system and equipment and medium

Abstract

The invention provides a flow chart node adding and displaying method, system and device and a medium, and belongs to the technical field of computers. The method comprises the following steps: initializing a canvas, initializing node data by creating an array, and defining a state variable of the canvas; adding nodes in the canvas by adopting a drag adding mode or a click adding mode; acquiring flow chart information, and reading coordinate information of nodes; and carrying out standardization processing on the coordinate information of the nodes, and displaying the corresponding nodes. According to the method, through a flexible adding mode, accurate coordinate calculation and standardization processing and efficient data storage and management, the flow chart node adding and displaying accuracy and the user experience are remarkably improved.

Description

Technical Field

[0001] The present invention belongs to the field of computer technology, and more specifically relates to a method, system, device and medium for adding and displaying flowchart nodes. Background Art

[0002] A flowchart, as an intuitive and efficient graphical expression tool, precisely demonstrates the logical relationship and execution order between steps through a combination of a series of nodes and connection lines. It is widely applied in many cutting-edge technology fields such as cloud computing and large model development. In the field of cloud computing, it helps developers and administrators achieve visual resource orchestration, making complex resource deployment, configuration and dependency relationships clear and easy to understand. In large model development, the flowchart becomes an important tool for process orchestration, enabling the intuitive display of model training, inference and optimization steps, and greatly improving development efficiency and transparency. Therefore, the accuracy and readability of flowcharts play a crucial role in enhancing work efficiency and decision-making quality.

[0003] With the continuous increase in the complexity of flowcharts, especially when a flowchart contains multiple levels, branches and cross-references, how to accurately calculate and reasonably layout the node positions has become a key problem to be solved urgently. The layout of node positions not only concerns the visual effect of the flowchart, but also directly affects the accurate transmission of information and the user's understanding efficiency. A flowchart with a reasonable layout can clearly reveal the logical structure of information flow, helping users quickly grasp the overall process and locate key steps. On the contrary, if the node positions are improperly laid out, it may lead to information confusion, increase the user's cognitive burden, and even affect the smooth progress of the entire project. Therefore, in-depth analysis of the relationships between nodes, including the connection methods, hierarchical structures and potential branch paths between nodes, has become the core element to ensure the clarity and readability of flowcharts.

[0004] Although there are currently various algorithms and technologies applied to the calculation and display of flowchart node positions, these technologies still have certain limitations when dealing with complex flowcharts. For example, some traditional methods may rely too much on fixed layout rules, resulting in being unable to cope when dealing with flowcharts with dynamic change characteristics. In addition, some methods may face problems such as low calculation efficiency and high memory occupancy when dealing with large-scale flowcharts, thus affecting the real-time update and interaction performance of flowcharts. Therefore, developing a node addition and display method that can adapt to the characteristics of complex flowcharts and at the same time has high calculation ability and good user experience is of great significance for improving the practicality of flowcharts and meeting diverse needs. Summary of the Invention

[0005] In view of the above problems, the purpose of the present invention is to provide a method, system, device and medium for adding and displaying flowchart nodes. Through flexible addition modes, accurate coordinate calculation and standardization processing, as well as efficient data storage and management, the accuracy of adding and displaying flowchart nodes and the user experience are significantly improved.

[0006] To achieve the above object, the present invention is implemented through the following technical solutions: In a first aspect, an embodiment of the present application provides a method for adding and displaying flowchart nodes, including: Initializing the canvas, initializing node data by creating an array, and defining state variables of the canvas; Adding nodes to the canvas using a drag-and-drop addition mode or a click addition mode; Obtaining flowchart information and reading coordinate information of the nodes; Performing standardization processing on the coordinate information pairs of the nodes and displaying the corresponding nodes.

[0007] In an optional embodiment, the initializing the canvas, initializing node data by creating an array, and defining state variables of the canvas includes: Creating a canvas container, setting the scaling style transform of the canvas to: scale(canvasDataRoom / 100), where canvasDataRoom is the scaling ratio; Defining the default node width nodewidth of the canvas; By binding a scroll event listener of the canvas, to obtain the position information scrollLeft of the x-axis scroll bar and the position information scrollTop of the y-axis scroll bar in real time; Creating a nodeList for storing an array of all node data and creating a linkList for storing the connection relationships between nodes; Defining canvas state variables, where the canvas state variables include the scaling ratio canvasDataRoom, the scroll position, and the width and height of the canvas.

[0008] In an optional embodiment, the drag-and-drop addition mode includes: By listening to the dragend event of the node, obtaining the coordinates (clientX, clientY) when the mouse is released; Obtaining the horizontal distance left between the left boundary of the canvas container and the left boundary of the visible area of the browser page, the vertical distance top between the upper boundary of the canvas container and the upper boundary of the visible area of the browser page, the width width of the canvas, the position information scrollLeft of the x-axis scroll bar, and the position information scrollTop of the y-axis scroll bar; Calculate the horizontal coordinate x and vertical coordinate y of the node through the following formula: x = (clientX - left - (width - (width × canvasDataRoom) / 100) / 2 + scrollLeft) / canvasDataRoom × 100 y = (clientY - top + scrollTop) / canvasDataRoom × 100 Add the coordinates (x, y) of the node to the array nodeList.

[0009] In an optional implementation of the click - add mode, it includes: Listen for the click event of the node. After obtaining the click event, set the default position coordinates of the node to (middle, vertical), where middle = width / 2; here, width is the width of the canvas, and vertical is the mid - point height value of the canvas in the vertical direction; Check whether the default position of the node is occupied by other nodes; If it is not occupied, the coordinates of the node are (middle, vertical); If it is occupied, move one node width to the right based on the default position of the node, and update the coordinates of the node to (x, y), where x = middle + nodewidth and y = vertical, until the updated node coordinates are not occupied; Add the coordinates (x, y) of the node to the array nodeList.

[0010] In an optional implementation, the standardization process of the coordinate information pair of the node and the display of the corresponding node include: Traverse the array nodeList to find the minimum horizontal coordinate value startLeft and the minimum vertical coordinate value startTop of all nodes; For the coordinates (x, y) of each node, standardize the coordinates of the node through the following formula: x = x - startLeft y = y - startTop Trigger the redrawing of the canvas, and call the displayOneNode method to draw the corresponding node based on the standardized node coordinates.

[0011] In an optional implementation, the value range of canvasDataRoom is 50 - 100.

[0012] In an optional embodiment, the default node width nodewidth is 240px.

[0013] In a second aspect, an embodiment of the present application further provides a flowchart node adding and displaying system, including: An initialization module, configured to initialize the canvas, initialize node data by creating an array, and define state variables of the canvas; A node adding module, configured to add nodes to the canvas in a drag-and-drop adding mode or a click-to-add mode; An information acquisition module, configured to acquire flowchart information and read coordinate information of nodes; A node display module, configured to perform normalization processing on coordinate information pairs of nodes and display corresponding nodes.

[0014] In a third aspect, an embodiment of the present application further provides an electronic device, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, the steps of the flowchart node adding and displaying method described in any one of the above are implemented.

[0015] In a fourth aspect, an embodiment of the present application further provides a storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the flowchart node adding and displaying method described in any one of the above are implemented.

[0016] It can be seen from the above technical solutions that the present invention has the following advantages: In the flowchart node adding and displaying method provided by the present application, by providing two adding modes of drag-and-drop and click, the flexibility and user-friendliness of flowchart node adding are enhanced. At the same time, the node coordinates are accurately calculated and canvas scaling and scrolling are considered to ensure the accuracy and adaptability of node positions. Using an array to store node data and connection relationships improves management efficiency, and through normalization processing, the consistency and visualization effect of node coordinates are achieved. In addition, the parameterized and configurable design enables this method to meet the requirements of different scenarios, overall improving the efficiency of flowchart creation and the user experience.

[0017] The present application provides two ways, namely the drag-and-drop adding mode and the click-to-add mode, to add flowchart nodes, which meet the usage habits and preferences of different users and improve the flexibility of operations. At the same time, both modes consider the convenience of user operations, making the node adding process more intuitive.

[0018] In the drag-and-drop addition mode of this application, by calculating the coordinates when the mouse is released and considering the position of the canvas container, the position of the scroll bar, and the scaling ratio, the coordinate information of the nodes can be accurately obtained. In the click-and-add mode, by checking whether the default position is occupied and automatically adjusting the position, it is ensured that the nodes can be reasonably distributed on the canvas. These processes improve the accuracy of node addition and the adaptability to canvas changes.

[0019] This application makes the management and update of the flowchart more efficient by creating arrays to store node data and connection relationships, and defining canvas state variables. At the same time, the standardized processing steps of this method ensure the consistency and readability of node coordinates, providing a good foundation for subsequent functions such as node display and connection relationship drawing, and having good scalability.

[0020] By standardizing the node coordinates and triggering the redrawing of the canvas, this application can display the corresponding nodes in real time, improving the visualization effect of the flowchart. At the same time, this method supports real-time acquisition of scroll position information, ensuring that the nodes can still be correctly displayed when the canvas is scrolled, enhancing the interactivity between the user and the flowchart.

[0021] Parameters such as the scaling ratio and node width involved in this application can be adjusted according to actual needs, improving the flexibility and configurability of the method. For example, the value range of canvasDataRoom can be reasonably set according to the size of the canvas and the density of nodes to ensure the clarity and readability of the flowchart. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] To more clearly illustrate the technical solutions of the present invention, the accompanying drawings required for description will be briefly introduced below. Obviously, the accompanying drawings in the following description are only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings.

[0023] Figure 1 It is a schematic flowchart of the method for adding and displaying flowchart nodes provided by this application.

[0024] Figure 2 It is a schematic structural diagram of the system for adding and displaying flowchart nodes provided by this application.

[0025] Figure 3 It is a schematic structural diagram of the electronic device provided by this application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0026] In the following detailed description of the specific steps of the method for adding and displaying flowchart nodes, various embodiments of the present disclosure will be more comprehensively described. The present disclosure can have various embodiments, and adjustments and changes can be made therein. However, it should be understood that there is no intention to limit the various embodiments of the present disclosure to the specific embodiments disclosed herein, but rather the present disclosure should be understood to cover all adjustments, equivalents, and / or alternative solutions that fall within the spirit and scope of the various embodiments of the present disclosure.

[0027] Hereinafter, the term "comprising" or "may comprise" that can be used in various embodiments of the present disclosure indicates the presence of the disclosed functions, operations, or elements, and does not limit the addition of one or more functions, operations, or elements. In addition, as used in various embodiments of the present disclosure, the terms "comprising", "having", and their cognates are only intended to indicate a specific feature, number, step, operation, element, component, or combination of the foregoing items, and should not be construed as first excluding the existence of one or more other features, numbers, steps, operations, elements, components, or the possibility of adding one or more features, numbers, steps, operations, elements, components, or combinations of the foregoing items.

[0028] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0029] In a flowchart, a node represents a step or decision point in a process, and the arrow connecting the nodes represents the flow direction between the steps. In applications involving flowcharts, it mainly includes two parts: the node area and the canvas area. The main operations involved include the display of nodes, the addition of nodes, the deletion of nodes, the zooming of the canvas, the movement of the canvas, and so on. The present invention provides a solution for calculating the position where a node is added to the canvas and the position where the node is echoed on the canvas.

[0030] Please refer to Figure 1 The following is a method flowchart of a method for adding and displaying a flowchart node in a specific embodiment. The method includes: S1: Initialize the canvas, initialize the node data by creating an array, and define the state variables of the canvas.

[0031] By way of example, first, initialize the canvas, including: Create a canvas container, set the scaling style of the canvas, use the CSS transform: scale property, and set the transform of the canvas scaling style to: scale(canvasDataRoom / 100), where canvasDataRoom is the scaling ratio of the current canvas, and the value range is 50 - 100.

[0032] Define the default node width nodewidth as 240px.

[0033] Bind the scroll event listener of the canvas to obtain the position of the scroll bar (scrollLeft and scrollTop) in real time. Among them, scrollLeft is the position information of the x-axis scroll bar, and scrollTop is the position information of the y-axis scroll bar.

[0034] Then, initialize the node data, including: Create a nodeList array to store all node data. Each node contains the following properties: id: The unique identifier of the node; x: The horizontal coordinate of the node; y: The vertical coordinate of the node.

[0035] Create a linkList array to store the connection relationships between nodes. Each connection contains the following properties: source: The ID of the source node; target: The ID of the target node.

[0036] At the same time, the following canvas state variables also need to be defined: canvasDataRoom: The current canvas scaling ratio; scrollLeft and scrollTop: The positions of the canvas scroll bars; width and height: The dimensions of the canvas.

[0037] S2: Add nodes to the canvas in the drag-and-drop addition mode or the click addition mode.

[0038] In the specific implementation, for different application scenarios with different requirements, two different modes can be used to add nodes to the canvas.

[0039] 1. Drag-and-drop addition mode, that is, add nodes by dragging nodes with the mouse.

[0040] In the drag-and-drop addition mode, first, add a dragend event to the nodes in the node area, obtain the mouse event object event, and parse out the horizontal coordinate clientX and vertical coordinate clientY of the mouse pointer relative to the browser page. Then, obtain the relative position top and left of the canvas in the browser, the size width of the canvas, the position of the x-axis scroll bar scrollLeft, and the position of the y-axis scroll bar scrollTop. Finally, calculate the coordinates of the node through the node position calculation formula.

[0041] Exemplarily, the execution process of the drag-and-drop addition mode is as follows: S201: By listening to the dragend event of the node, obtain the coordinates (clientX, clientY) when the mouse is released.

[0042] S202: Obtain the horizontal distance left between the left boundary of the canvas container and the left boundary of the visible area of the browser page, the vertical distance top between the upper boundary of the canvas container and the upper boundary of the visible area of the browser page, the width width of the canvas, the position information scrollLeft of the x-axis scroll bar, and the position information scrollTop of the y-axis scroll bar.

[0043] S203: Calculate the horizontal coordinate x and vertical coordinate y of the node through the following formula: x = (clientX - left - (width - (width × canvasDataRoom) / 100) / 2 + scrollLeft) / canvasDataRoom × 100 y = (clientY - top + scrollTop) / canvasDataRoom × 100 S204 Add the coordinates (x, y) of the node to the array nodeList.

[0044] 2. Click to add mode, that is, add nodes by clicking on the nodes.

[0045] In the click-to-add mode, first, add a click event to the nodes in the node area, set the default position of the node to the middle position middle horizontally and the vertical position vertical of the canvas, and obtain the size width of the canvas, middle = width / 2.

[0046] Then, obtain the default position of the node, and determine whether there is already a node at this position in the current canvas. If so, the node position is obtained according to the formula: x = middle + nodewidth for the new node position.

[0047] For example, the execution process of the click-to-add mode is as follows: S211: Listen for the click event of the node. When the click event is obtained, set the default position coordinates of the node to (middle, vertical), where middle = width / 2; here, width is the width of the canvas, and vertical is the midpoint height value of the canvas in the vertical direction.

[0048] S212: Check whether the default position of the node is occupied by other nodes; S213: If it is not occupied, the coordinates of the node are (middle, vertical); if it is occupied, move one node width to the right based on the default position of the node, and update the coordinates of the node to (x, y), where x = middle + nodewidth and y = vertical. After the update, continue to check whether the updated node position is occupied. If it is occupied, continue to move one node width nodewidth to the right until the updated node coordinates are not occupied.

[0049] S214: Add the coordinates (x, y) of the node to the array nodeList.

[0050] S3: Obtain the flowchart information and read the coordinate information of the nodes.

[0051] For example, read the arrays nodeList and linkList to obtain all the node data and the connection relationships between the nodes.

[0052] S4: Standardize the coordinate information pairs of the nodes and display the corresponding nodes.

[0053] In this embodiment, by introducing two flexible node addition modes of dragging and clicking, combined with accurate coordinate calculation and standardization processing procedures, it ensures the accurate display and reasonable layout of the flowchart nodes on the canvas. At the same time, an efficient array storage method is adopted to manage the node data and connection relationships, which not only improves the management efficiency of the flowchart, but also enhances the convenience and visualization effect of user operations, thus overall optimizing the experience and efficiency of flowchart creation.

[0054] In an embodiment of the present invention, based on step S4, the following will give a possible embodiment to non-restrictively elaborate on its specific implementation scheme.

[0055] When editing the flowchart, it is necessary to echo the saved flowchart nodes and their connection relationships. When saving the flowchart information, if the coordinate information of the nodes, i.e., the horizontal coordinate x and the vertical coordinate y, is saved at the same time, the minimum values of x and y can be found by traversing all the node data, and used as the starting coordinate positions of the nodes on the canvas, namely the starting horizontal coordinate starttop and the starting vertical coordinate startleft. At this time, the coordinate positions of the nodes when they are echoed can be calculated based on the starting coordinate positions on the canvas and the stored coordinate information of the nodes, and then displayed.

[0056] Based on the above principle, the implementation process of this step is as follows: S401: Traverse the array nodeList to find the minimum horizontal coordinate value startLeft and the minimum vertical coordinate value startTop of all nodes.

[0057] S402: For the coordinates (x, y) of each node, standardize the node coordinates through the following formula: x = x - startLeft y = y - startTop S403: Trigger the redrawing of the canvas, and call the displayOneNode method to draw the corresponding nodes based on the standardized node coordinates.

[0058] In an embodiment of the present invention, based on the above method flow, the method further includes the case where the coordinate information of the nodes cannot be read. If the coordinate information of the nodes cannot be read, first obtain the flowchart node graphic structure data graphData through the node connection relationship, calculate the node position coordinates for the graphData data, and draw the nodes on the canvas according to the coordinates, so as to realize the display of the nodes. The following will give a possible embodiment to non-restrictively elaborate on its specific implementation scheme.

[0059] Step 1: Obtain the flowchart node graphic structure data through the node connection relationship.

[0060] Obtain the array linkList, and recursively traverse the node connection relationship according to linkList to generate the graphic structure data graphData between nodes.

[0061] First, initialize an empty object graphData, and then traverse each connection relationship in linkList. For each connection, check whether the source node already exists in graphData. If not, initialize it as an empty array. Then, add the target node to the child node list of the source node.

[0062] The specific script content is as follows: / / Traverse the connection relationship linkList.forEach(link =>{ const { source, target} = link; / / Initialize the list of child nodes of the source node if (!graphData[source]) { graphData[source] = []; } / / Add the target node to the list of child nodes of the source node graphData[source].push(target); }); return graphData; } Step 2: Calculate the node position coordinates for the graphData data and draw the nodes.

[0063] By recursively traversing graphData, first initialize the variable j to 0, which is used to track the number of nodes at the current level. Calculate the left boundary left2 of the current node, which is based on the incoming L parameter and the incremented value of j (each node moves 300px to the right), left2 = L + j × 300 + 300. Initialize top2 to the incoming T value, which is used to track the vertical position at the current level.

[0064] Traverse each node ID (nextnode1) in the graphData object: Use the nodeList.find method to find the node object corresponding to the ID. If the node has not been drawn yet (the isDraw property is false), then draw it: If it is not the first node at the current level, move top2 up by 300 units, top2 = top2 + 300. Mark the node as drawn (isDraw = true).

[0065] When drawing, call the displayOneNode method to draw the node, passing in the node object, the left boundary left2, and the top boundary top2. After drawing, increment j by 1 to prepare to draw the next node at the current level. Recursively call the recur2 function to draw the child nodes of the current node, passing in the child node information, the left boundary left2 of the current node, and the updated top boundary top2. Return the updated top2 value for use by the previous level of recursion.

[0066] AsFigure 2 As shown below, this is an embodiment of a flowchart node addition and display system provided by an embodiment of the present disclosure. This system and the flowchart node addition and display methods of the above embodiments belong to the same inventive concept. For the details not described in detail in the embodiment of the flowchart node addition and display system, reference can be made to the embodiments of the above flowchart node addition and display methods.

[0067] A flowchart node addition and display system includes: an initialization module, a node addition module, an information acquisition module, and a node display module.

[0068] The initialization module is used to initialize the canvas, initialize node data by creating an array, and define the state variables of the canvas; The node addition module is used to add nodes to the canvas in a drag-and-drop addition mode or a click-and-add mode; The information acquisition module is used to acquire flowchart information and read the coordinate information of the nodes; The node display module is used to perform normalization processing on the coordinate information pairs of the nodes and display the corresponding nodes.

[0069] The flowchart node addition and display system provided in this embodiment realizes precise control of flowchart node addition and display through flexible node addition modes (drag-and-drop and click), accurate coordinate calculation considering the influence of canvas scaling and scrolling, and efficient management of nodes and connection relationships using an array. At the same time, the normalization processing of coordinates ensures the consistency of node positions and improves the visualization effect of the flowchart. Overall, this system effectively improves the convenience, accuracy, and user experience of flowchart creation.

[0070] Figure 3 It is a schematic diagram of the hardware structure of an electronic device for implementing various embodiments of the present invention.

[0071] The flowchart node addition and display method provided in the embodiments of the present application can be applied to an electronic device. Those skilled in the art can understand that the electronic device structure involved in the embodiments of the present invention does not constitute a limitation on the electronic device. The electronic device may include more or fewer components than shown in the figure, or combine certain components, or have different component arrangements. In the embodiments of the present invention, the electronic device includes, but is not limited to, a laptop computer, a desktop computer, a workbench, a personal digital assistant, a server, a blade server, a mainframe computer, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as, a personal digital processor, a cellular phone, a smart phone, a wearable device, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the embodiments of the present application described and / or claimed herein.

[0072] An electronic device may include a processor, an external memory interface, an internal memory, a Universal Serial Bus (USB) interface, a charging management module, a power management module, a battery, a wireless communication module, an audio module, a speaker, a microphone, a sensor module, keys, a camera, a display screen, and a Subscriber Identity Module (SIM) card interface, etc.

[0073] The processor may include one or more processing units. For example, the processor may include a Central Processing Unit (CPU), etc., an Application Processor (AP), a modem processor, a Graphics Processing Unit (GPU), an Image Signal Processor (ISP), a controller, a memory, a video codec, a Digital Signal Processor (DSP), a baseband processor, and / or a Neural-Network Processing Unit (NPU), etc. Among them, different processing units may be independent devices or integrated in one or more processors.

[0074] Among them, the processor may be the nerve center and command center of the electronic device. The controller may generate operation control signals according to the instruction operation code and timing signals to complete the control of fetching and executing instructions.

[0075] A memory may also be provided in the processor for storing instructions and data. In some embodiments, the memory in the processor is a cache memory. This memory may save the instructions or data that the processor has just used or recycled. If the processor needs to use the instruction or data again, it can directly call it from this memory. This avoids repeated accesses, reduces the waiting time of the processor, and thus improves the system efficiency.

[0076] The external memory interface may be used to connect an external memory card, such as a MicroSD card, to implement the storage capacity expansion of the electronic device. The external memory card communicates with the processor through the external memory interface to implement the data storage function. For example, files such as music and videos are saved in the external memory card.

[0077] The internal memory can be used to store computer-executable program code, which includes instructions. The processor executes various functional applications and data processing of the electronic device by running the instructions stored in the internal memory. The internal memory can include a program storage area and a data storage area. The internal memory can include a high-speed random access memory, and can also include non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0078] The wireless communication function of the electronic device can be implemented by an antenna, a wireless communication module, a modem processor, a baseband processor, etc.

[0079] The wireless communication module can provide wireless communication solutions applied to the electronic device, including wireless local area networks (WLANs) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite systems (GNSS), frequency modulation (FM), near field communication (NFC), infrared technology (IR), etc.

[0080] The electronic device can implement audio functions, etc. through an audio module, a speaker, a receiver, a microphone, a headphone jack, an application processor, etc.

[0081] The electronic device can implement a shooting function through an ISP, a camera, a video codec, a GPU, a display screen, an application processor, etc.

[0082] The electronic device can implement a display function through a GPU, a display screen, an application processor, etc.

[0083] The GPU is a microprocessor for image processing, connecting the display screen and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor can include one or more GPUs, which execute program instructions to generate or change display information.

[0084] The display screen is used to display images, videos, etc. The display screen includes a display panel.

[0085] The above electronic device implements the method for adding and displaying flowchart nodes in the present application. By combining the drag-and-drop and click-adding modes, as well as precise coordinate calculation and standardization processing procedures, it realizes the flexible and accurate addition and display of flowchart nodes. At the same time, using arrays to efficiently store node data and connection relationships not only improves the management efficiency but also ensures the reasonable layout and visualization effect of nodes on the canvas. It achieves the beneficial effects of optimizing the convenience of flowchart creation and the user experience, and meeting diverse application requirements.

[0086] In the storage medium provided by the present application, there is a program product capable of implementing the method for adding and displaying flowchart nodes.

[0087] The method for adding and displaying flowchart nodes includes: initializing the canvas, initializing node data by creating an array, and defining the state variables of the canvas; adding nodes to the canvas using the drag-and-drop addition mode or the click-adding mode; obtaining flowchart information and reading the coordinate information of the nodes; performing standardization processing on the coordinate information pairs of the nodes, and displaying the corresponding nodes.

[0088] In some possible implementation manners, the method for adding and displaying flowchart nodes of the present disclosure may be implemented in the form of a program product, which includes program code. When the program product runs on a terminal device, the program code is used to cause the terminal device to execute the steps according to various exemplary embodiments of the present disclosure described in the "Exemplary Method" section above in this specification.

[0089] The storage medium of the present disclosure may adopt any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples (non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0090] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present invention. Various modifications to these embodiments will be obvious to those skilled in the art, and the general principles defined herein can be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention will not be limited to the embodiments shown herein, but will be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for adding and displaying a flowchart node, characterized in that: include: Initialize the canvas, initialize node data by creating an array, and define the state variables of the canvas; Use the drag-and-drop mode or click-and-drop mode to add nodes to the canvas; Get the flowchart information and read the node coordinate information; The coordinate information of the nodes is standardized and the corresponding nodes are displayed.

2. The method for adding and displaying flowchart nodes according to claim 1, characterized in that: The canvas is initialized by creating an array to initialize node data and defining state variables of the canvas, including: Create a canvas container and set the canvas scaling style transform to: scale(canvasDataRoom / 100), where canvasDataRoom is the scaling ratio; Define the default node width nodewidth of the canvas; By binding the scroll event listener of the canvas, the position information of the x-axis scroll bar, scrollLeft, and the position information of the y-axis scroll bar, scrollTop, can be obtained in real time. Create a nodeList to store all node data arrays, and create a linkList array to store the connection relationships between nodes; Canvas state variables are defined, including the zoom ratio canvasDataRoom, the scroll position, and the width and height of the canvas.

3. The method for adding and displaying flowchart nodes according to claim 2, characterized in that: The drag-and-drop mode includes: By listening to the dragend event of the node, get the coordinates (clientX, clientY) when the mouse is released; Get the horizontal distance left of the left border of the canvas container relative to the left border of the browser page visible area, the vertical distance top of the top border of the canvas container relative to the top border of the browser page visible area, the width of the canvas, the position information scrollLeft of the x-axis scroll bar, and the position information scrollTop of the y-axis scroll bar; The horizontal coordinate x and vertical coordinate y of the node are calculated by the following formula: x=(clientX-left-(width-(width×canvasDataRoom) / 100) / 2+scrollLeft) / canvasDataRoom×100 y=(clientY-top+scrollTop) / canvasDataRoom×100 Add the node's coordinates (x, y) to the array nodeList.

4. The method for adding and displaying flowchart nodes according to claim 2, characterized in that: The click-to-add mode includes: Listen to the click event of the node. When the click event is received, set the default position coordinates of the node to (middle, vertical), middle = width / 2; where width is the width of the canvas and vertical is the height of the middle point of the canvas in the vertical direction; Check if the default position of the node is already occupied by another node; If unoccupied, the node's coordinates are (middle, vertical); If it is occupied, move the node right by one node width based on the default position of the node, and update the node coordinates to (x, y), where x = middle + nodewidth, y = vertical, until the updated node coordinates are not occupied; Add the node's coordinates (x, y) to the array nodeList.

5. The method for adding and displaying flowchart nodes according to claim 3 or 4, characterized in that: The coordinate information of the nodes is standardized and the corresponding nodes are displayed, including: Traverse the array nodeList and find the minimum horizontal coordinate value startLeft and the minimum vertical coordinate value startTop of all nodes; For the coordinates (x, y) of each node, the coordinates of the node are standardized using the following formula: x = x - startLeft y = y - startTop Trigger canvas redrawing, and call the displayOneNode method to draw the corresponding node based on the standardized node coordinates.

6. The method for adding and displaying flowchart nodes according to claim 2, characterized in that: The value range of the canvasDataRoom is 50-100.

7. The method for adding and displaying flowchart nodes according to claim 2, characterized in that: The default node width nodewidth is 240px.

8. A flow chart node adding and displaying system, characterized in that: The system adopts the method for adding and displaying flowchart nodes as claimed in any one of claims 1 to 7; The system comprises: The initialization module is used to initialize the canvas, initialize node data by creating an array, and define the state variables of the canvas; The node adding module is used to add nodes in the canvas by dragging and dropping mode or clicking and adding mode; The information acquisition module is used to obtain the flow chart information and read the coordinate information of the node; The node display module is used to standardize the coordinate information of the nodes and display the corresponding nodes.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the steps of the method for adding and displaying flowchart nodes as described in any one of claims 1 to 7 are implemented.

10. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for adding and displaying flowchart nodes as claimed in any one of claims 1 to 7 are implemented.

Images