Code development assisting method, system and equipment and storage medium

Abstract

The invention relates to the technical field of software development, and particularly provides a code development assisting method, system and device and a storage medium, and the method comprises the steps that canvas data is acquired, and the canvas data is component information in a canvas area; acquiring matched scene data according to the canvas data; monitoring an event that a mouse drags a component, and synchronously obtaining track data of the mouse; and determining the final position of the dragged component according to the matched scene data and the track data. The software development efficiency is improved.

Description

Technical Field

[0001] The present invention belongs to the technical field of software development, and in particular relates to a code development auxiliary method, system, device and storage medium. Background Art

[0002] Low-code platforms are widely used in data-driven application development. Their visualization approach, through a combination of nodes (components or data sources) and connecting lines, clearly illustrates the data transfer path between different modules, helping developers quickly understand and debug logic.

[0003] After entering the designer of the low-code platform, since the software architecture is built by dragging components to the canvas, improper dragging actions can easily lead to architectural errors or invalid dragging actions, reducing development efficiency. Summary of the Invention

[0004] In view of the above-mentioned deficiencies in the prior art, the present invention provides a code development auxiliary method, system, device and storage medium to solve the above-mentioned technical problems.

[0005] In a first aspect, the present invention provides a code development assistance method, comprising: Acquire canvas data, where the canvas data is component information in the canvas area; Acquiring matching scene data according to the canvas data; Listen to the event of the mouse dragging the component and synchronously obtain the mouse trajectory data; Determining the end point position of the dragged component according to the matched scene data and the trajectory data; The scenario data includes component information of historically developed software.

[0006] In an optional implementation, obtaining canvas data includes: Obtain component tree information through the global status of the low-code platform; Component information is extracted from the component tree information using field screening technology, and the component information is stored as canvas data in JSON format.

[0007] In an optional embodiment, the method further comprises: Bind the components in the component tree to the corresponding data source through the databindings field.

[0008] In an optional embodiment, the method further comprises: Collect the overall architecture of historically developed software, including all software components, component attribute parameters, and data flows between components; Build a graph file of the overall architecture using components in the historically developed software as nodes and data streams as edges, and set component data parameters as node attributes; Define the minimum size of a subgraph, and use the gSpan algorithm to mine frequent subgraphs from all graph files based on the minimum size; Convert frequent subgraphs to scene data.

[0009] In an optional embodiment, obtaining matching scene data according to the canvas data includes: Retrieve the name, type and attribute parameters of the corresponding component, the connection line of the component and the data flow information corresponding to the connection line according to the canvas data; Confirming that the dragging end position of the dragged component coincides with the container boundary in the canvas data, and extracting layout information of the container, the layout information including information of the components in the container and association information between the components; The matching scene data of the layout information is obtained by a cosine similarity calculation method.

[0010] In an optional embodiment, determining the end position of the dragged component according to the matched scene data and the trajectory data includes: Retrieve the name, type and attribute parameters of the corresponding component, the connection line of the component and the data flow information corresponding to the connection line according to the canvas data; Confirming that the dragging end position of the dragged component coincides with the container boundary in the canvas data, and extracting layout information of the container, the layout information including information of the components in the container and association information between the components; Obtaining matching scene data of the layout information through a similarity calculation method, and if the dragged component exists in the matching scene data, adding the dragged component to the container; if the dragged component exists in the matching scene data, adjusting the dragging end position of the dragged component to outside the container; the matching scene data can be one scene data or a combination of multiple scene data; Obtain the end point position of the connection line being constructed and the matching scene data of the current canvas data, and query the end point component from the matching scene data of the canvas data based on the starting point component of the connection line; wherein the starting point component is the component connected to the starting point of the connection line, and the end point component is the component connected to the end point of the connection line; Obtaining the actual position of the endpoint component in the canvas, calculating the distance difference between the actual position and the endpoint position of the connecting line, and determining that the connecting line construction has failed if the distance difference reaches a set distance threshold; otherwise, adjusting the endpoint position to the actual position of the endpoint component; Confirm that the end point position of the connection line that has been adjusted is modified, and use the component position indicated by the cursor as the end point position of the connection line.

[0011] In an optional embodiment, the method further comprises: Obtaining difference data between the canvas data and the matched scene data, wherein the difference data is the component missing from the canvas data; Set the missing component as the priority display component and put the priority display component on the top in the component display bar.

[0012] In a second aspect, the present invention provides a code development assistance system, comprising: An acquisition module, configured to acquire canvas data, wherein the canvas data is component information in a canvas area; A matching module, configured to obtain matching scene data according to the canvas data; The monitoring module is used to monitor the events of the mouse dragging the component and synchronously obtain the mouse trajectory data; A positioning module, configured to determine the end point of the dragged component based on the matched scene data and the trajectory data; The scenario data includes component information of historically developed software.

[0013] According to a third aspect, a device is provided, comprising: A memory for storing a code development auxiliary program; A processor is used to implement the steps of the code development assistance method provided in the first aspect when executing the code development assistance program.

[0014] In a fourth aspect, a computer-readable storage medium is provided, on which a code development assistance program is stored. When the code development assistance program is executed by a processor, the steps of the code development assistance method provided in the first aspect are implemented.

[0015] The beneficial effect of the present invention lies in that the code development auxiliary method, system, device and storage medium provided by the present invention match the component information of the completed drag in the canvas with the scene data formed by the historical development software, and then use the matched scene data to assist in positioning the end point position of the dragged component, thereby avoiding the problem of component position error or invalid dragging action caused by improper dragging action, thereby improving software development efficiency.

[0016] In addition, the present invention has a reliable design principle, a simple structure and a very broad application prospect. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0018] Figure 1 is a schematic flow chart of a method according to an embodiment of the present invention.

[0019] Figure 2 FIG. 4 is a schematic block diagram of a system according to an embodiment of the present invention.

[0020] Figure 3 A schematic structural diagram of a device provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0021] In order to enable those skilled in the art to better understand the technical solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of the present invention.

[0022] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art of the present invention. The terms used in this specification of the present invention are only for the purpose of describing specific embodiments and are not intended to limit the present invention.

[0023] The key terms appearing in the present invention are explained below.

[0024] The gSpan (Graph-based Substructure Pattern Mining) algorithm is a frequent subgraph mining algorithm for graph data mining. It is primarily used to discover frequently occurring subgraph patterns within a graph database and has broad applications in fields such as cheminformatics, bioinformatics, and social network analysis. The following is a detailed introduction to the gSpan algorithm: Basic concepts: Graph: In the gSpan algorithm, a graph is usually a directed or undirected graph that can contain nodes and edges. Both nodes and edges can have their own labels.

[0025] Frequent subgraph: A subgraph that appears in the graph database at a number of times that reaches or exceeds the minimum support threshold specified by the user.

[0026] Algorithm principle: Graph Encoding: The gSpan algorithm first performs a depth-first search (DFS) encoding on the graph, converting the graph structure into a string representation. Each graph has a unique minimum DFS code, which makes it easy to compare and sort graphs.

[0027] Pattern growth: Using a pattern growth strategy, we start with a subgraph of length 1 (i.e., a single node or edge) and gradually expand the subgraph. Each time we expand, we generate new candidate subgraphs based on certain rules and calculate their support in the graph database.

[0028] Support calculation: Traverse the graph database, count the number of occurrences of each candidate subgraph, and compare it with the minimum support threshold. If the support of the candidate subgraph is greater than or equal to the threshold, it is output as a frequent subgraph and continued to expand; otherwise, the candidate subgraph is pruned and no further expansion is performed.

[0029] Algorithm steps: Initialization: Set the minimum support threshold and perform DFS encoding on each graph in the graph database.

[0030] Generate initial frequent subgraph: Find all frequent subgraphs (single nodes or edges) of length 1.

[0031] Iterative expansion: Generate new candidate subgraphs from the current set of frequent subgraphs according to certain rules. Calculate the support of the candidate subgraphs and filter out frequent subgraphs.

[0032] Termination condition: The algorithm terminates when no new frequent subgraph can be generated.

[0033] The code development assistance method provided by the embodiment of the present invention is executed by a computer device. Accordingly, the code development assistance system runs in the computer device.

[0034] Figure 1 is a schematic flow chart of a method according to an embodiment of the present invention. Figure 1 The execution subject can be a code development auxiliary system. According to different requirements, the order of the steps in the flowchart can be changed, and some steps can be omitted.

[0035] like Figure 1 As shown, the method includes: S1. Get canvas data, which is component information in the canvas area; S2. Obtain matching scene data according to the canvas data; S3. Listen to the event of the mouse dragging the component and synchronously obtain the mouse trajectory data; S4 determines the end position of the dragged component based on the matching scene data and the trajectory data; The static component is a component that is in a certain position; The scenario data includes component information of historically developed software.

[0036] In an embodiment of the present invention, based on step S1, a possible embodiment will be given below to illustrate its specific implementation scheme in a non-limiting manner.

[0037] The system obtains component tree information from the global state of the low-code platform, extracts component information from the component tree using field filtering technology, and stores the component information as canvas data in JSON format. The canvas data includes the component name, type, and attribute parameters, the component connection lines, and the corresponding data flow information.

[0038] The global state plays the role of core data storage and management in the low-code platform. It is a centralized data warehouse that stores various key information of the entire application during operation, including but not limited to the layout, status, interaction logic, and data binding relationships of components. By maintaining the global state, the low-code platform can ensure data consistency and real-time synchronization between components, providing users with a smooth visual design experience. The global state is organized in a tree structure, which matches the nested relationship of the component tree, making it easy to quickly locate and access the information of each component. Each node represents a component and contains basic properties such as the component's unique identifier, type, location, size, and its association with other components. For example, a container component node may contain multiple child component nodes. This hierarchical relationship can clearly describe the nested structure between components.

[0039] In a low-code platform, every user operation (such as dragging a component, modifying properties, adding connecting lines, etc.) will trigger an update to the global state. To ensure data consistency and performance, a one-way data flow design pattern is usually adopted, that is, all state updates are managed through a unified entry point. For example, using an event-driven approach, when a user operates a component, a corresponding event is triggered, and the event processing function updates the global state based on the type and parameters of the operation. At the same time, to improve performance, state snapshots and incremental update technologies can be used to update only the changed parts to avoid unnecessary global refreshes.

[0040] Methods for obtaining component information based on global state include: S101. Component tree construction and maintenance The component tree is a visual representation of the global state, reflecting the hierarchical structure and nesting relationships between components. When the low-code platform starts, it automatically builds the component tree based on the data in the global state. As users design, the component tree updates in real time to reflect the latest component layout and nesting relationships. For example, when a user adds a new component, the component tree adds a new node and associates it with the parent component node.

[0041] S102. Get component tree information from the global state To obtain component tree information, low-code platforms provide specialized interfaces or methods. These interfaces are typically based on a global state storage structure, accessing each component node through recursive traversal and extracting its information. During the traversal, you can filter out components of specific types or components that meet specific conditions. For example, you can retrieve information only for components visible on the current page or only for components with specific properties.

[0042] S103. Data consistency and integrity check When obtaining component tree information, data consistency and integrity checks are required to ensure the accuracy of the extracted information. For example, checks are made to ensure that component unique identifiers are not duplicated, that relationships between components are legal, and that component attribute values ​​meet expectations. If inconsistent or incomplete data is found, it is necessary to promptly correct the problem or prompt the user to make changes.

[0043] S104. Field Filtering Define filtering rules: Specify the filtering criteria, such as component name, type, specific attribute value, etc. You can use a dictionary to represent the rules, with the key being the attribute name and the value being the corresponding filtering condition.

[0044] Traversing the component tree: Recursively traverse each node in the component tree, checking each node against the filter rules. Specifically, the filter_components function receives the component tree and the filter rules as parameters, and recursively traverses the component tree using the traverse function. The traverse function recursively traverses each node in the component tree, checking whether the current node meets the filter rules. If so, it adds it to the result list. The child nodes are then recursively traversed.

[0045] For example, a sample component tree and filtering rules are defined, the filter_components function is called for filtering, and finally the filtering results are output.

[0046] Filter components: When traversing nodes, check whether their properties meet the filtering rules. If so, add the component information to the result list.

[0047] Return result: After the traversal is completed, a list of component information that meets the filtering rules is returned.

[0048] Choosing JSON format for storing component information offers several advantages. JSON is a lightweight data exchange format that offers good readability and extensibility, making it easy to parse and process using various programming languages. Furthermore, JSON aligns with the tree structure of the component tree, effectively reflecting the hierarchical relationships and nested structures between components. Furthermore, JSON supports nested objects and arrays, making it convenient for storing component attributes and connection information.

[0049] After storing the extracted component information as canvas data in JSON format, it needs to be effectively stored and managed. This data can be stored in a local file system, database, or cloud storage service for subsequent access and use. Furthermore, corresponding interfaces and tools need to be provided for reading, writing, updating, and deleting canvas data. For example, an API can be provided to allow other systems or applications to obtain canvas data through network requests.

[0050] In an embodiment of the present invention, based on step S2, a possible embodiment will be given below to illustrate its specific implementation scheme in a non-limiting manner.

[0051] First, pre-build various scenario data. The specific methods include: 1. Collect the overall architecture of historically developed software, which includes all software components, component attribute parameters, and data flows between components.

[0052] (1) Determination of data sources: Internal project repositories: If the historically developed software is an internal project, you can obtain the relevant code and documentation from a version control system (such as Git). By analyzing the file structure, module divisions, and annotations in the code repository, you can understand the software's component composition.

[0053] Documentation: Look for software requirements documents, design documents, architecture documents, etc. These documents usually describe the software components, attribute parameters, and data flows in detail.

[0054] Database records: If the software uses a database, the data interactions and dependencies between components can be analyzed from the aspects of the database table structure, stored procedures, views, etc.

[0055] (2) Data collection and organization: Traverse the code and documents to identify the various components in the software, including front-end page components (such as buttons, text boxes), back-end service components (such as API interfaces, business logic modules), etc.

[0056] For each component, extract its attribute parameters. For example, for a button component, attribute parameters may include the button text, color, size, etc.; for a database query component, attribute parameters may include the query statement, return result format, etc.

[0057] Analyze the data interactions between components to determine the direction and content of data flows. This can be done through function calls, data transfers, message queues, and other methods in the code. Organize this information into a structured data set that includes component names, attribute parameters, and data flow information.

[0058] 2. Use the components in the overall architecture of the historical development software as nodes and the data streams as edges to construct a graph file of the overall architecture, and set the component data parameters as node attributes.

[0059] (1) Graph data structure selection: Adjacency list or adjacency matrix: Choose the appropriate graph data structure based on your needs. Adjacency lists are suitable for sparse graphs and can save storage space; adjacency matrices are suitable for dense graphs and facilitate quick querying of node connections.

[0060] (2) Creation of nodes and edges: Add each component as a node to the graph, set a unique identifier for each node, and store the component's attribute parameters as attributes of the node. For example, in Python, you can use the networkx library to create graphs and nodes. Add edges to the graph based on the data flow information between components. Each edge represents a data flow, and you can set edge properties such as the data flow type and data volume.

[0061] (3) Saving the image file: Common graph file formats include GML, GraphML, JSON, etc. Select an appropriate file format to save the graph for subsequent processing.

[0062] 3. Define the minimum size of a subgraph and use the gSpan algorithm to mine frequent subgraphs from all graph files based on the minimum size.

[0063] (1) Minimum scale definition Define the minimum number of nodes and edges in a subgraph based on actual needs. For example, a minimum subgraph must contain at least 3 nodes and 2 edges.

[0064] (2) gSpan algorithm implementation: Convert the graph file to a format that the gSpan algorithm can process. This usually requires representing the graph in the form of a depth-first search (DFS) encoding.

[0065] Use an existing gSpan algorithm implementation library (such as the pygsp library in Python) to perform frequent subgraph mining. Set the minimum support threshold and the minimum subgraph size, and run the algorithm.

[0066] 4. Convert frequent subgraphs into scene data.

[0067] (1) Subgraph information extraction: Extract node (component) information and edge (data flow) information from frequent subgraphs. Record attribute parameters of each node and attributes of each edge.

[0068] (2) Scene data organization: Organize the extracted information into a structured format for scene data, such as JSON. Scene data should include the component name, type, attribute parameters, and the relationships between components.

[0069] By calculating the cosine similarity between the canvas data and various scene data, the scene data with the highest similarity is selected: Convert the container's layout information (component attributes, connection line relationships) into a feature vector: (1) Feature extraction Component features: Type (e.g., Button → 1, Input → 2); Position (normalized x, y coordinates); Size (normalized width and height); Attribute parameters (e.g. color → RGB value vector); Connection characteristics: The number of connection lines (each connection is considered as a dimension); Data flow direction (e.g., A→B→1, B→A→-1); Data source type (e.g. API → 1, Database → 2).

[0070] (2) Vector construction example Assume that your layout contains two components: # Component A: Button, position (0.2, 0.3), size (0.1, 0.05), color (255, 0, 0) # Component B: Input, position (0.5, 0.3), size (0.3, 0.08), color (0, 255, 0) # Connection line: A→B (data flow direction) vector = [ 1, # Component A type 0.2, 0.3, # Component A position 0.1, 0.05, # Component A size 255, 0, 0, # Component A color 2, # Component B type 0.5, 0.3, # Component B position 0.3, 0.08, # Component B size 0, 255, 0, # Component B color 1 # Connection line exists (A→B)].

[0071] 2. Cosine similarity formula Calculate the similarity between two layout vectors a and b:

[0072] Giving higher weights to key features (such as connecting line types) results in weighted similarity: .

[0073] The scene data with the highest weighted similarity and reaching the set similarity threshold are screened out as the matching scene data.

[0074] In addition, to avoid computing matching scene data every time the canvas data is updated, which would otherwise consume computing resources, this implementation limits the triggering scenarios for computing matching scene data and reduces the computational effort by limiting matching objects. Specifically, S201. Retrieve the name, type and attribute parameters of the corresponding component, the connection line of the component and the data flow information corresponding to the connection line according to the canvas data.

[0075] (1) Canvas data analysis: Determine the storage format of the canvas data, such as JSON, XML, etc. Use the corresponding parsing library to parse the canvas data.

[0076] Extract the component name, type, and attribute parameters from the canvas data. You can get detailed information about each component by traversing the component list in the canvas data.

[0077] (2) Connection line data flow information acquisition: Find information related to the connection line in the canvas data, determine the starting component and end component of the connection line, and the data flow information represented by the connection line.

[0078] S202. Confirm that the dragging end position of the dragged component coincides with the container boundary in the canvas data, and extract layout information of the container, where the layout information includes information of the components in the container and association information between the components.

[0079] (1) Position judgment: Coordinate calculation: Get the coordinates of the dragged component's end point and the boundary coordinates of each container in the canvas data. By comparing the coordinate values, determine whether the dragged end point coincides with the container boundary.

[0080] (2) Layout information extraction: If the dragging end point coincides with the container boundary, the component information in the container is extracted, including the component name, type, attribute parameters, etc.

[0081] Analyze the relationships between components in the container, such as data flow, dependencies, etc., and organize this information into layout information.

[0082] S203. Obtain matching scene data of the layout information through a similarity calculation method.

[0083] (1) Similarity calculation: Feature extraction: Extract features from layout information and scene data, such as component type, attribute parameters, connection relationships between components, etc.

[0084] Similarity algorithm selection: Select an appropriate similarity calculation method, such as cosine similarity, edit distance, etc. Calculate the similarity score between the layout information and each scene data.

[0085] (2) Matching scene data selection: A similarity threshold is set, and scene data with a similarity score exceeding the threshold is selected as the matching scene data.

[0086] Check whether the dragged component exists in the matching scene data, and decide whether to add the component to the container or adjust the drag end point position based on the judgment result.

[0087] In an embodiment of the present invention, based on step S3, a possible embodiment will be given below to illustrate its specific implementation scheme in a non-limiting manner.

[0088] 1. Drag to start When the user clicks a draggable component: Record the current mouse position (starting point coordinates); Record the initial position of the component on the canvas; Mark the drag status as "in progress"; Start recording trajectory data (starting point timestamp and coordinates).

[0089] 2. Drag and drop When the user holds down the mouse and moves: Calculate the distance the mouse moves in real time (relative to the starting point); Update the position of the component on the canvas according to the movement distance; The current mouse coordinates and timestamp are recorded every 50 milliseconds to form trajectory data.

[0090] 3. Drag ends When the user releases the mouse: Record the final position and timestamp of the component; Check whether the component is close to a predefined fixed position (such as the center point, common layout position); Calculate the straight-line distance between the component position and the fixed position; If the distance is less than the set tolerance (such as 50 pixels), the component will be automatically adsorbed to that position; Clear the drag status flag and stop track recording.

[0091] 4. Trajectory Data Structure The recorded data includes: Timestamp (accurate to milliseconds); Mouse X / Y coordinates; Event type (origin, movement, destination); Example: [Start: Time 10:00:00, Coordinates (200, 150) → Move: Time 10:00:01, Coordinates (220,180) → End: Time 10:00:02, Coordinates (250, 200)] This application focuses on the end position of the mouse.

[0092] In an embodiment of the present invention, based on step S4, a possible embodiment will be given below to illustrate its specific implementation scheme in a non-limiting manner.

[0093] S401. Correct component position If the dragged component exists in the matching scene data, the dragged component is added to the container.

[0094] If the dragged component exists in the matching scene data, the dragging end position of the dragged component is adjusted to outside the container; the matching scene data is one scene data or a combination of multiple scene data.

[0095] S402. Correct the connection line 1. Obtain the endpoint position of the connection line being constructed and the matching scene data of the current canvas data, and query the endpoint component from the matching scene data of the canvas data based on the starting component of the connection line; wherein the starting component is the component connected to the starting point of the connection line, and the endpoint component is the component connected to the end point of the connection line.

[0096] (1) Location and scene data acquisition Record the coordinates of the end point of the link being constructed.

[0097] Get the scene data that matches the current canvas data. This data contains the association information between components.

[0098] (2) Endpoint component query: According to the name or identifier of the starting point component of the connection line, the relevant connection relationship is found in the matching scene data.

[0099] Determine possible endpoint components from the relevant connection relationships.

[0100] 2. Obtain the actual position of the endpoint component on the canvas, calculate the distance difference between the actual position and the endpoint position of the connecting line, and if the distance difference reaches the set distance threshold, determine that the connecting line construction has failed; if the distance difference does not reach the distance threshold, adjust the endpoint position to the actual position of the endpoint component.

[0101] (1) Actual location acquisition: Find the actual position coordinates of the destination component in the canvas data based on its name or identifier.

[0102] (2) Distance difference calculation: Calculates the distance difference between the actual location of the destination component and the destination location of the connecting line using the Euclidean distance formula.

[0103] (3) Distance threshold judgment: Set a distance threshold. If the distance difference reaches the threshold, the connection line construction is determined to have failed. If the distance difference does not reach the threshold, the end point position of the connection line is adjusted to the actual position of the end point component.

[0104] 3. Confirm that the end point position of the connection line that has been adjusted is modified, and use the component position indicated by the cursor as the end point position of the connection line.

[0105] (1) Location modification confirmation: Through the interface prompt or confirmation box, the user is asked to confirm whether to modify the end point position of the connection line after the position adjustment.

[0106] (2) End point position update: If the user confirms the modification, the component position indicated by the cursor is used as the end point of the connection line, and the connection line information in the canvas data is updated.

[0107] In one embodiment, the arrangement order of components in the component display column is adjusted according to the difference data between the canvas data and the matched scene data.

[0108] (1) Obtaining difference data between the canvas data and the matched scene data, wherein the difference data is the component missing from the canvas data.

[0109] Traverse the parsed canvas data and extract component information. This typically includes key information such as the component's unique identifier, name, and type. This information can be stored in an array for easy comparison later.

[0110] In the same way, component information is extracted from the matching scene data and stored in another array.

[0111] Determines whether a component exists in an array by comparing its unique identifier or name.

[0112] (2) Set the missing component as the priority display component and put the priority display component at the top in the component display bar.

[0113] Add specific tags or attributes to the missing components to indicate that they are priority components. You can add an isPriority attribute to the component object and set its value to true.

[0114] Merge the marked missing components into the component list of the component display bar. If the component list of the component display bar is stored in an array, you can use the concat() method of the array to merge them.

[0115] Define sorting rules to display priority components first. You can use the sort() method of the array to sort according to the isPriority property of the components.

[0116] Update the component display to display the sorted list of components. In front-end development, you can use DOM manipulation or the rendering mechanism provided by the framework to implement interface updates. For example, in Vue.js, you can trigger a re-render of the view by updating the data source of the component list.

[0117] To help users more intuitively identify the priority component, you can adjust its style. For example, you can change the background color of the component, add an icon, etc. You can achieve style adjustments through CSS class names.

[0118] In some embodiments, the code development assistance system may include multiple functional modules composed of computer program segments. The computer program of each program segment in the code development assistance system may be stored in a memory of a computer device and executed by at least one processor to perform (see Figure 1 Description) Functions that assist in code development.

[0119] In this embodiment, the code development assistance system can be divided into multiple functional modules according to the functions it performs, such as Figure 2 As shown. The functional modules of the system may include: a first optimization module, a second optimization module, and a third optimization module. A module as referred to in the present invention refers to a series of computer program segments that can be executed by at least one processor and can perform fixed functions, and is stored in a memory. In this embodiment, the functions of each module will be described in detail in subsequent embodiments.

[0120] An acquisition module, configured to acquire canvas data, wherein the canvas data is component information in a canvas area; A matching module, configured to obtain matching scene data according to the canvas data; The monitoring module is used to monitor the events of the mouse dragging the component and synchronously obtain the mouse trajectory data; A positioning module, configured to determine the end point of the dragged component based on the matched scene data and the trajectory data; The static component is a component that is in a certain position; The scenario data includes component information of historically developed software.

[0121] Figure 3 The code development auxiliary method provided for the embodiment of the present application can be applied to a device. It will be understood by those skilled in the art that the device structure involved in the embodiment of the present invention does not constitute a limitation on the device, and the device may include more or fewer components than shown, or combine certain components, or arrange different components. In an embodiment of the present invention, the 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 device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices 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 required herein.

[0122] The device 300 may include a processor 310, a memory 320, and a communication unit 330. These components communicate via one or more buses. Those skilled in the art will appreciate that the server structure shown in the figure does not limit the present invention. The server structure may be a bus structure or a star structure, and may include more or fewer components than shown, or combine certain components, or arrange the components differently.

[0123] The memory 320 can be used to store execution instructions of the processor 310. The memory 320 can be implemented by any type of volatile or non-volatile memory device, or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk, or optical disk. When the execution instructions in the memory 320 are executed by the processor 310, the device 300 can perform some or all of the steps in the above-described method embodiments.

[0124] The processor 310 is the control center of the storage device, which uses various interfaces and lines to connect various parts of the entire electronic device. It executes various functions of the electronic device and / or processes data by running or executing software programs and / or modules stored in the memory 320, and calling data stored in the memory. The processor can be composed of an integrated circuit (IC), for example, it can be composed of a single packaged IC, or it can be composed of multiple packaged ICs with the same or different functions. For example, the processor 310 can only include a central processing unit (CPU). In an embodiment of the present invention, the CPU can be a single computing core or multiple computing cores.

[0125] The communication unit 330 is configured to establish a communication channel so that the storage device can communicate with other devices, receive user data sent by other devices, or send user data to other devices.

[0126] The present invention also provides a computer storage medium, wherein the computer storage medium may store a program that, when executed, may include some or all of the steps of each embodiment provided by the present invention. The storage medium may be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0127] Those skilled in the art will clearly understand that the techniques in the embodiments of the present invention can be implemented using software and a necessary general-purpose hardware platform. Based on this understanding, the technical solutions in the embodiments of the present invention, or the portion that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium such as a USB flash drive, a mobile hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, among other media capable of storing program code, and includes instructions for causing a computer device (which can be a personal computer, a server, or a second device, a network device, etc.) to execute all or part of the steps of the methods described in various embodiments of the present invention.

[0128] In this specification, the same or similar parts between the various embodiments can be referred to each other. In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the description of the method embodiment.

[0129] In the several embodiments provided by the present invention, it should be understood that the disclosed systems and methods can be implemented in other ways. For example, the system embodiments described above are merely illustrative. For example, the division of the modules is merely a logical function division. In actual implementation, there may be other division methods, such as multiple modules or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of systems or modules, and can be electrical, mechanical or other forms.

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

[0131] In addition, each functional module in each embodiment of the present invention may be integrated into one processing module, or each module may exist physically separately, or two or more modules may be integrated into one module.

[0132] Although the present invention has been described in detail with reference to the accompanying drawings and in conjunction with preferred embodiments, the present invention is not limited thereto. Without departing from the spirit and essence of the present invention, persons of ordinary skill in the art may make various equivalent modifications or substitutions to the embodiments of the present invention, and such modifications or substitutions shall be within the scope of the present invention. Any changes or substitutions that can be easily conceived by persons skilled in the art within the technical scope disclosed in the present invention shall be within the scope of protection of the present invention.

Claims

1. A code development assistance method, characterized in that: include: Acquire canvas data, where the canvas data is component information in the canvas area; Acquiring matching scene data according to the canvas data; Listen to the event of the mouse dragging the component and synchronously obtain the mouse trajectory data; Determining the end point position of the dragged component according to the matched scene data and the trajectory data; The scenario data includes component information of historically developed software.

2. The method according to claim 1, characterized in that Get canvas data, including: Obtain component tree information through the global status of the low-code platform; Component information is extracted from the component tree information using field screening technology, and the component information is stored as canvas data in JSON format.

3. The method according to claim 2, characterized in that The method further comprises: Bind the components in the component tree to the corresponding data source through the databindings field.

4. The method according to claim 1, wherein The method further comprises: Collect the overall architecture of historically developed software, including all software components, component attribute parameters, and data flows between components; Build a graph file of the overall architecture using components in the historically developed software as nodes and data streams as edges, and set component data parameters as node attributes; Define the minimum size of a subgraph, and use the gSpan algorithm to mine frequent subgraphs from all graph files based on the minimum size; Convert frequent subgraphs to scene data.

5. The method according to claim 1, wherein Acquiring matching scene data according to the canvas data, including: Retrieve the name, type and attribute parameters of the corresponding component, the connection line of the component and the data flow information corresponding to the connection line according to the canvas data; Confirming that the dragging end position of the dragged component coincides with the container boundary in the canvas data, and extracting layout information of the container, the layout information including information of the components in the container and association information between the components; The matching scene data of the layout information is obtained by a cosine similarity calculation method.

6. The method according to claim 1, characterized in that Determining the end position of the dragged component according to the matched scene data and the trajectory data includes: Retrieve the name, type and attribute parameters of the corresponding component, the connection line of the component and the data flow information corresponding to the connection line according to the canvas data; Confirming that the dragging end position of the dragged component coincides with the container boundary in the canvas data, and extracting layout information of the container, the layout information including information of the components in the container and association information between the components; Obtaining matching scene data of the layout information through a similarity calculation method, and if the dragged component exists in the matching scene data, adding the dragged component to the container; if the dragged component exists in the matching scene data, adjusting the dragging end position of the dragged component to outside the container; the matching scene data can be one scene data or a combination of multiple scene data; Obtain the end point position of the connection line being constructed and the matching scene data of the current canvas data, and query the end point component from the matching scene data of the canvas data based on the starting point component of the connection line; wherein the starting point component is the component connected to the starting point of the connection line, and the end point component is the component connected to the end point of the connection line; Obtaining the actual position of the endpoint component in the canvas, calculating the distance difference between the actual position and the endpoint position of the connecting line, and determining that the connecting line construction has failed if the distance difference reaches a set distance threshold; otherwise, adjusting the endpoint position to the actual position of the endpoint component; Confirm that the end point position of the connection line that has been adjusted is modified, and use the component position indicated by the cursor as the end point position of the connection line.

7. The method according to claim 6, characterized in that The method further comprises: Obtaining difference data between the canvas data and the matched scene data, wherein the difference data is the component missing from the canvas data; Set the missing component as the priority display component and put the priority display component on the top in the component display bar.

8. A code development assistance system, characterized in that: include: An acquisition module, configured to acquire canvas data, wherein the canvas data is component information in a canvas area; A matching module, configured to obtain matching scene data according to the canvas data; The monitoring module is used to monitor the events of the mouse dragging the component and synchronously obtain the mouse trajectory data; A positioning module, configured to determine the end point of the dragged component based on the matched scene data and the trajectory data; The scenario data includes component information of historically developed software.

9. A device, characterized in that include: A memory for storing a code development auxiliary program; A processor, configured to implement the steps of the code development assistance method according to any one of claims 1 to 7 when executing the code development assistance program.

10. A computer-readable storage medium storing a computer program, characterized in that: The readable storage medium stores a code development assistance program, which, when executed by a processor, implements the steps of the code development assistance method according to any one of claims 1 to 7.

Images