Component visualization front-end page automatic layout method, system, device and medium

Abstract

The present invention relates to the field of automatic layout technology, and discloses a method, system, device and medium for automatic layout of component visualization front-end pages, including: capturing the user's dragging action on the component in a visualization front-end interface; calculating the area covered by the grid when moving through the captured dragging action and the grid size of the component; and automatically adjusting the page layout according to the space compression strategy selected when dragging the grid. With the help of a visualization drag engine, even non-professional developers can quickly generate front-end page layouts, significantly reducing the threshold for front-end development. There is no need to write a lot of code, which effectively shortens the development cycle and reduces costs, greatly improving development efficiency.

Description

Technical Field

[0001] The present invention relates to the field of automatic layout technology, and in particular to a component visualization front-end page automatic layout method, system, device and medium. Background Art

[0002] In today's digital age, the complexity and interactivity of front-end pages continue to increase, and traditional front-end development models can no longer meet the market demand for rapid iteration and high customization. Although component-based front-end development frameworks such as React and Vue have improved development efficiency to a certain extent, for non-professional developers, the learning threshold is still high, and when faced with complex pages, they still need to invest a lot of time to write code. Summary of the invention

[0003] In view of the above-mentioned problems, the present invention is proposed.

[0004] Therefore, the technical problem solved by the present invention is that the existing component layout method has the problem of needing to adjust components one by one, which is time-consuming and labor-intensive.

[0005] In order to solve the above technical problems, the present invention provides the following technical solutions: a component visualization front-end page automatic layout method, comprising:

[0006] In the visual front-end interface, capture the user's dragging action on the component;

[0007] Using the captured dragging motion and the grid size of the component, calculate the area covered by the grid as it moves;

[0008] The page layout is automatically adjusted according to the space compression strategy selected when dragging the grid.

[0009] As a preferred solution of the component visualization front-end page automatic layout method described in the present invention, wherein: the component includes a functional module for building a user interface in front-end development;

[0010] Each component is an independent module, which has specific functions by presetting codes and resources inside the component;

[0011] By integrating high-frequency business components, a component library is constructed; in the process of constructing the component library, a component registration page is used to set a default width and height, as well as a minimum width and minimum height of each component;

[0012] Users can select the required components from the registered component library by dragging and dropping, and directly apply them to the layout in the form of a grid.

[0013] As a preferred solution of the component visualization front-end page automatic layout method described in the present invention, the area covered by the calculation grid when moving includes: when the user starts the drag operation on the grid, the system captures the current position of the mouse in real time; with the current position of the mouse as the midpoint, the grid is expanded, and the area covered by the grid during the movement is calculated to obtain the current coverage area;

[0014] Assume the absolute coordinates of the mouse on the screen are (Xm, Ym);

[0015] The width of the grid is Km and the length is Cm. The size can be set through the front end before dragging the grid;

[0016] The current coverage area FG is described by the constraint of the horizontal axis and the constraint of the vertical axis;

[0017] The constraint of the horizontal axis is expressed as:

[0018] The constraint of the ordinate is expressed as:

[0019] Among them, FG x Indicates the horizontal axis area of ​​the current coverage area FG, FG y Indicates the vertical coordinate area of ​​the current coverage area FG.

[0020] As a preferred solution of the automatic layout method of component visualization front-end page of the present invention, wherein: through a boundary checking mechanism, it is determined whether the edge of the grid has exceeded the boundary set by the canvas;

[0021] If it is determined to be beyond the boundary, the current drag operation is terminated immediately, the original position of the grid is kept unchanged, and this round of layout adjustment process ends; after confirming that the grid is completely within the canvas range, the system makes a judgment based on the preset space compression strategy;

[0022] The boundary checking mechanism includes: assuming the absolute coordinates of the upper left corner of the canvas as (Xc, Yc); the size of the canvas: width Wc and height Hc;

[0023] When any of the four criteria is met, it is considered to have exceeded the boundaries set by the canvas;

[0024] The four types of determinations include:

[0025] There is a horizontal coordinate greater than Xc+Wc in the coverage area FG;

[0026] There is a horizontal coordinate smaller than Xc in the coverage area FG;

[0027] There is a vertical coordinate greater than Yc in the coverage area FG;

[0028] There is a vertical coordinate smaller than Yc-Hc in the coverage area FG.

[0029] As a preferred solution of the component visualization front-end page automatic layout method described in the present invention, the space compression strategy includes: when it is set not to perform space compression, entering the stacking detection and position adjustment process; in the non-compression mode, checking one by one whether there is a stacking phenomenon between the currently dragged grid and other placed grids on the canvas; if a stacking phenomenon is detected, the currently dragged grid is in a non-placeable state and the current position is not updated; if no stacking is found, after confirming the placement, the grid position is updated and this round of position adjustment ends;

[0030] When the vertical space compression strategy is enabled, the current dragged grid is checked one by one through stacking detection to see if there is any stacking between the currently dragged grid and other placed grids on the canvas; if no stacking is found, the grid position is updated after the placement is confirmed, and this round of position adjustment ends; if stacking is detected, it is analyzed whether there is enough free space in the vertical direction to accommodate the dragged grid; if there is enough free space, the page layout is automatically adjusted by compressing the free space; if there is not enough free space, the page layout is automatically adjusted by compressing the free space and the grids in the vertical direction;

[0031] The stack detection includes taking the intersection of the area FG covered by the currently dragged grid with the areas covered by other placed grids on the canvas one by one, expressed as:

[0032] FG∩BG i =PG i

[0033] Among them, BG i represents the area covered by the i-th placed grid, i represents the index of the placed grid, i∈(0,I), I is the number of other placed grids on the canvas, PG i Represents the intersection of the area covered by the currently dragged grid and the area covered by the i-th placed grid; if PG i If it is an empty set, it means there is no stack; if PG i If it is not an empty set, it means there is a stack.

[0034] As a preferred solution of the component visualization front-end page automatic layout method of the present invention, the analyzing whether there is enough free space in the vertical direction to accommodate the drag grid includes directly performing free space analysis when the placed grids in the canvas are arranged in one column; when the placed grids in the canvas are arranged in more than one column, obtaining the left and right boundaries of the current drag grid, specifically:

[0035] The left boundary (Xc, y) represents the straight line with the horizontal coordinate Xc; the right boundary (Xc+Wc, y) represents the straight line with the horizontal coordinate Xc+Wc; where y represents an arbitrary vertical coordinate;

[0036] Collect all placed grids between the left boundary and the right boundary. If all collected placed grids do not exceed the left boundary and the right boundary, and the placed grids between the left boundary and the right boundary are arranged in one column, then only perform free space analysis on the placed grids between the left boundary and the right boundary.

[0037] If all the collected placed grids do not exceed the left boundary and the right boundary, but the placed grids between the left boundary and the right boundary are arranged in more than one row, then only the placed grids between the left boundary and the right boundary are subjected to global vertical space analysis;

[0038] If all the collected placed grids exceed the left boundary or the right boundary, when the left boundary exceeds the boundary, the left boundary is extended to the left until there are no placed grids exceeding the boundary on the left side; when the right boundary exceeds the boundary, the right boundary is extended to the right until there are no placed grids exceeding the boundary on the right side;

[0039] After the boundary expansion is completed, the left boundary and the right boundary are updated, and it is re-determined whether the placed grids between the left boundary and the right boundary are arranged in only one column. When there is only one column, free space analysis is performed on the placed grids between the left boundary and the right boundary; when there is more than one column, global vertical space analysis is performed on the placed grids between the left boundary and the right boundary;

[0040] The free space analysis includes calculating the gap between every two grids and accumulating the gaps to obtain the sum of the gaps;

[0041] JX=J0+JX 1,2 +JX 2,3 ...+JX j-1,j +X0

[0042] Where J0 is the distance between the upper border of the canvas and the topmost grid; X0 is the distance between the lower border of the canvas and the bottommost grid; JX is the distance between the upper border of the canvas and the bottommost grid. j-1,j represents the gap between the j-1th and jth grids; j represents the number of grids between the left boundary and the right boundary; JX represents the gap sum, if JX>Cm, it is determined that there is enough free space to accommodate the dragged grid; if JX≤Cm, it is determined that there is not enough free space to accommodate the dragged grid;

[0043] The global vertical space analysis consists of accumulating the adjustable gaps starting from the top of the canvas:

[0044]

[0045] Among them, KX represents the cumulative result of the adjustable gap. If KX>Cm, it is determined that there is enough free space to accommodate the dragged grid; if KX≤Cm, it is determined that there is not enough free space to accommodate the dragged grid; f(y) represents the recognition function. Between the left boundary and the right boundary, if the straight line where the input y value is located does not pass through the placed grid, then f(y)=1; if the straight line where the input y value is located passes through any placed grid, then f(y)=0.

[0046] As a preferred solution of the automatic layout method of the component visualization front-end page of the present invention, the automatic adjustment includes, by identifying the function f(y), identifying the part where f(y)=1 between the left boundary and the right boundary, recording the length of each continuous gap part, and recording them in order as: Q1, Q2, ..., Q q ; Among them, Q q represents the length of the qth continuous gap part, where q is the number of continuous gap parts;

[0047] The line where the vertical coordinate Ym of the mouse on the screen is located is the dividing line;

[0048] If there is enough free space, when the dividing line passes through the placed grid, the currently dragged grid is in an unplaceable state and the current position is not updated; when the dividing line does not pass through the placed grid, the length Q of the continuous gap where the dividing line is located is p Amplify and adjust Q p Previous Q1, Q2...Q p-1 , and Q p After Q p+1 , Q p+2 ...Q q The compression ratios on both sides of the dividing line are reduced from 100% at the beginning with a compression step of 0.01% until there is no stacking and BY ≥ MBY, then the compression ratio is stopped;

[0049] Among them, BY represents the shortest vertical distance between the straight line where the upper and lower edges of the currently dragged grid are located and the straight line where the edges of the placed grid are located; MBY represents the minimum value of the length of the continuous gap part in the current compression state;

[0050] In the case of insufficient free space, when the dividing line passes through the placed grid, the currently dragged grid is in an unplaceable state and the current position is not updated; when the dividing line does not pass through the placed grid, the length Q of the continuous gap where the dividing line is located is p Amplify and at the same time Q1, Q2...Q p-1 and Q p+1 , Q p+2 ...Q q All are compressed to 0. After the compression is completed, the intrinsic size of the placed grid is compressed. The compression ratio on both sides of the dividing line is gradually reduced from 100% at the beginning according to the compression step of 0.01% until there is no stacking, and then the compression ratio is stopped;

[0051] During compression, the mouse is allowed to drag the grid and compression will continue based on the final mouse position.

[0052] A component visualization front-end page automatic layout system using the method of the present invention comprises:

[0053] The collection unit captures the user's dragging action on the component in the visual front-end interface;

[0054] The calculation unit calculates the area covered by the grid when moving, by capturing the drag action and the grid size of the component;

[0055] The adjustment unit automatically adjusts the page layout according to the space compression strategy selected when dragging the grid.

[0056] A computer device comprises: a memory and a processor; the memory stores a computer program, wherein: the processor implements the steps of any one of the methods of the present invention when executing the computer program.

[0057] A computer-readable storage medium stores a computer program, wherein: when the computer program is executed by a processor, the steps of any one of the methods of the present invention are implemented.

[0058] Beneficial effects of the present invention: The component visual front-end page automatic layout method provided by the present invention, with the help of a visual drag engine, can quickly generate the front-end page layout even for non-professional developers, significantly lowering the threshold for front-end development. There is no need to write a lot of code, effectively shortening the development cycle and reducing costs, greatly improving development efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0059] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying creative work.

[0060] Figure 1 An overall flow chart of the component visualization front-end page automatic layout method provided by the first embodiment of the present invention;

[0061] Figure 2 A schematic diagram of gaps in the component visualization front-end page automatic layout method provided in the first embodiment of the present invention. DETAILED DESCRIPTION

[0062] In order to make the above-mentioned purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are described in detail below in conjunction with the drawings of the specification. Obviously, the described embodiments are part of the embodiments of the present invention, but not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary persons in the art without creative work should fall within the scope of protection of the present invention.

[0063] Example 1, reference Figure 1 , Figure 2 , which is an embodiment of the present invention, provides a component visualization front-end page automatic layout method, including:

[0064] S1: In the visual front-end interface, capture the user's dragging action on the component.

[0065] It should be noted that the components include functional modules used to build user interfaces in front-end development; each component is an independent module, which has specific functions by presetting codes and resources inside the component; a component library is built by integrating high-frequency business components (such as task inboxes, personal calendars, my menus, etc., and reserving flexible expansion interfaces to support component development in more business scenarios in the future. These components are designed to be plug-and-play, ensuring efficiency and reliability.); during the construction of the component library, the component registration page is used to set the default width and height, as well as the minimum width and minimum height of each component.

[0066] Users can select the required components from the registered component library by dragging and dropping, and directly apply them to the layout in the form of a grid.

[0067] Through the dedicated component registration page, we can set the default width and height of the component, as well as the minimum width and minimum height and other properties. This mechanism provides the basis for the visualization engine to intelligently recommend layouts. Through an intuitive and easy-to-use front-end interface, users can select the required components from the registered component library through simple selection operations and apply them directly to the layout.

[0068] S2: Calculate the area covered by the grid when moving, using the captured drag action and the grid size of the component.

[0069] Furthermore, the area covered by the calculated grid when it moves includes: when the user starts a drag operation on the grid, the system captures the current position of the mouse in real time; with the current position of the mouse as the midpoint, the grid is expanded, and the area covered by the grid during the movement is calculated to obtain the current coverage area.

[0070] Assume the absolute coordinates of the mouse on the screen are (Xm, Ym).

[0071] The width of the grid is Km and the length is Cm. The size can be set through the front end before dragging the grid.

[0072] The current coverage area FG is described by the constraints of the horizontal axis and the vertical axis.

[0073] The constraint of the horizontal axis is expressed as: The constraint of the ordinate is expressed as: Among them, FG x Indicates the horizontal axis area of ​​the current coverage area FG, FG y Indicates the vertical coordinate area of ​​the current coverage area FG.

[0074] Furthermore, the boundary check mechanism is used to determine whether the edge of the grid has exceeded the boundary set by the canvas. If it is determined to be beyond the boundary, the current drag operation is terminated immediately, the original position of the grid is kept unchanged, and this round of layout adjustment process ends; after confirming that the grid is completely within the canvas range, the system makes a judgment based on the preset space compression strategy.

[0075] The boundary checking mechanism includes: setting the absolute coordinates of the upper left corner of the canvas to (Xc, Yc); the size of the canvas: width Wc and height Hc.

[0076] When any one of the four criteria is met, it is determined to be beyond the boundary set by the canvas. The four criteria include:

[0077] There is a horizontal coordinate greater than Xc+Wc in the coverage area FG.

[0078] There are abscissas smaller than Xc in the coverage area FG.

[0079] There are ordinates greater than Yc in the coverage area FG.

[0080] There is a vertical coordinate smaller than Yc-Hc in the coverage area FG.

[0081] By determining whether the grid exceeds the canvas boundary, we can prevent layout confusion, component loss and other problems, and ensure that the user interface presents all content within the visible range. When the user drags the grid beyond the boundary, the system terminates the operation in time to avoid partial display or difficulty in locating the component. This restriction helps users feel the layout rules more intuitively during the operation, reduces erroneous operations, and improves the fluency of layout design.

[0082] If the grid exceeds the boundary, it may cause the interface layout to be disordered or overflow the display, thus affecting the position and function of other components. The boundary checking mechanism immediately blocks the operation when it detects that the grid is out of bounds, ensuring the stability of the page structure and avoiding functional problems. As a preliminary judgment step, the boundary checking mechanism can filter out all out-of-bounds grids. Only when it is confirmed that the grid is completely within the canvas range will the system continue to perform further layout optimization according to the preset space compression strategy. This layer-by-layer screening mechanism ensures that the premise of subsequent operations is that the grid is always within the canvas, ensuring that the compression strategy can work normally. The boundary checking mechanism ensures that when the grid is adjusted within the canvas range, there will be no misoperation due to out-of-bounds. In this way, the system can accurately update the new position of the grid, reduce calculation errors, and ensure the accuracy and rationality of the final layout update.

[0083] S3: Automatically adjust the page layout according to the space compression strategy selected when dragging the grid.

[0084] The space compression strategy includes: when setting to not perform space compression, entering the stacking detection and position adjustment process; in the non-compression mode, checking one by one whether there is stacking between the currently dragged grid and other placed grids on the canvas; if stacking is detected, the currently dragged grid is in an unplaceable state and the current position is not updated; if no stacking is found, after confirming the placement, the grid position is updated and this round of position adjustment ends.

[0085] What I want to say is that without compression, ensure the stability and neatness of the page layout, do not make any space adjustments, and prevent forced grid placement from causing layout errors or visual problems.

[0086] When the vertical space compression strategy is enabled, stacking detection is used to check whether there is any stacking between the currently dragged grid and other placed grids on the canvas. If no stacking is found, the grid position is updated after the placement is confirmed, and this round of position adjustment ends. If stacking is detected, it is analyzed whether there is enough free space in the vertical direction to accommodate the dragged grid. If there is enough free space, the page layout is automatically adjusted by compressing the free space. If there is not enough free space, the page layout is automatically adjusted by compressing the free space and the grid in the vertical direction. The core purpose of this strategy design is to make intelligent adjustments when there is insufficient space so that the canvas can accommodate more content. By dynamically compressing the free space and the grid, the layout is optimized, the overall space utilization is improved, and the problem of users being unable to place grids is avoided.

[0087] The stack detection includes taking the intersection of the area FG covered by the currently dragged grid with the areas covered by other placed grids on the canvas one by one, expressed as:

[0088] FG∩BG i =PG i

[0089] Among them, BG i represents the area covered by the i-th placed grid, i represents the index of the placed grid, i∈(0,I), I is the number of other placed grids on the canvas, PG i Represents the intersection of the area covered by the currently dragged grid and the area covered by the i-th placed grid; if PG i If it is an empty set, it means there is no stack; if PG i If it is not an empty set, it means there is a stack.

[0090] Furthermore, the analysis of whether there is enough free space in the vertical direction to accommodate the drag grid includes: when the placed grids in the canvas are arranged in one column, the free space analysis is directly performed; when the placed grids in the canvas are arranged in more than one column, the left and right boundaries of the current drag grid are obtained, specifically:

[0091] The left boundary (Xc, y) represents the straight line whose abscissa is Xc; the right boundary (Xc+Wc, y) represents the straight line whose abscissa is Xc+Wc; wherein y represents an arbitrary ordinate.

[0092] Collect all placed grids between the left boundary and the right boundary. If all collected placed grids do not exceed the left boundary and the right boundary, and the placed grids between the left boundary and the right boundary are arranged in a column, then only perform free space analysis on the placed grids between the left boundary and the right boundary.

[0093] If all the collected placed grids do not exceed the left boundary and the right boundary, but the placed grids between the left boundary and the right boundary are arranged in more than one row, then global vertical space analysis is only performed on the placed grids between the left boundary and the right boundary.

[0094] If all the collected placed grids exceed the left boundary or the right boundary, when the left side exceeds the boundary, the left boundary is extended to the left until there are no placed grids exceeding the boundary on the left side; when the right side exceeds the boundary, the right boundary is extended to the right until there are no placed grids exceeding the boundary on the right side.

[0095] After completing the boundary expansion, the left boundary and the right boundary are updated, and it is re-determined whether the placed grids between the left boundary and the right boundary are arranged in only one column. When there is only one column, a free space analysis is performed on the placed grids between the left boundary and the right boundary; when there is more than one column, a global vertical space analysis is performed on the placed grids between the left boundary and the right boundary.

[0096] It is worth mentioning that by identifying the left and right boundaries of the current dragged grid, the free space in the area where it is located can be determined. This process first distinguishes between the situations where the grid is arranged in one column and multiple columns, and performs corresponding free space analysis according to different arrangement structures to ensure the accuracy of layout adjustment. When the placed grids in the canvas are arranged in one column, the free space analysis is performed directly. In this case, the vertical space calculation is relatively simple, ensuring fast response and accurate adjustment. When the arrangement is not just one column, the definition of the left and right boundaries helps to delineate the horizontal area that the dragged grid may occupy, and perform more detailed free space calculations, thereby improving the accuracy of spatial analysis and the rationality of placement decisions. However, when the arrangement is not just one column, a global vertical space analysis of these grids is required. In this case, the system will comprehensively consider the distribution of gaps in the entire area to avoid misjudgments or unreasonable layouts that may be caused by simple local adjustments. By flexibly adjusting the boundaries, the system can perform vertical space evaluation on a wider grid area, ensuring that the dragged grid can be placed in the most optimized position while avoiding the space limitations caused by narrow boundaries. Through differentiated processing, the amount of calculation can be simplified to the maximum extent to ensure the smoothness of the canvas.

[0097] The free space analysis includes calculating the gap between every two grids and accumulating the gaps to obtain the sum of the gaps:

[0098] JX=J0+JX 1,2 +JX 2,3 ...+JX j-1,j +X0

[0099] Where J0 is the distance between the upper border of the canvas and the topmost grid; X0 is the distance between the lower border of the canvas and the bottommost grid; JX is the distance between the upper border of the canvas and the bottommost grid. j-1,j represents the gap between the j-1th and jth grids; j represents the number of grids between the left boundary and the right boundary; JX represents the total gap. If JX>Cm, it is determined that there is enough free space to accommodate the dragged grid; if JX≤Cm, it is determined that there is not enough free space to accommodate the dragged grid.

[0100] The global vertical space analysis consists of accumulating the adjustable gaps starting from the top of the canvas:

[0101]

[0102] Among them, KX represents the cumulative result of the adjustable gap. If KX>Cm, it is determined that there is enough free space to accommodate the dragged grid; if KX≤Cm, it is determined that there is not enough free space to accommodate the dragged grid; f(y) represents the recognition function. Between the left boundary and the right boundary, if the straight line where the input y value is located does not pass through the placed grid, then f(y)=1; if the straight line where the input y value is located passes through any placed grid, then f(y)=0.

[0103] Reference Figure 2 , abcd four components (assuming that a is the code component recording "calendar"; b is the code component recording "menu"; c is the code component recording "clock"; d is the code component recording "diary"), when accumulating gaps, this method only counts the gap length of arrow 1 + arrow 2, and does not count the gap length of arrow 1 + arrow 4 or arrow 3 + arrow 2, ensuring that the original layout can be maintained during layout. The layout will not be messed up due to compression.

[0104] By identifying the function f(y), the portion where f(y)=1 is identified between the left boundary and the right boundary, and the length of each continuous gap portion is recorded, which is recorded in order as: Q1, Q2, ..., Q q ; Among them, Q q It represents the length of the qth continuous gap part, where q is the number of continuous gap parts.

[0105] The straight line where the vertical coordinate Ym of the mouse on the screen is located is used as the dividing line.

[0106] If there is enough free space, when the dividing line passes through the placed grid, the currently dragged grid is in an unplaceable state and the current position is not updated; when the dividing line does not pass through the placed grid, the length Q of the continuous gap where the dividing line is located is p Amplify and adjust Q pPrevious Q1, Q2...Q p-1 , and Q p After Q p+1 , Q p+2 ...Q q Compress them separately, and the compression ratio on both sides of the dividing line is gradually reduced from 100% at the beginning according to the compression step of 0.01% until there is no stacking and BY ≥ MBY, then stop reducing the compression ratio. BY represents the shortest vertical distance between the upper and lower edges of the currently dragged grid and the straight line where the edges of the placed grid are located; MBY represents the minimum length of the continuous gap part in the current compression state (this value will be gradually updated as the compression strategy progresses). It should be noted here that with the compression strategy, for the upper side, Q p Previous Q1, Q2...Q p-1 The value of also gradually decreases, and the minimum value in this sequence is obtained as the termination criterion of the upper part compression strategy. For the lower side, Q p After Q p+1 , Q p+2 ...Q q The value of also gradually decreases, and the minimum value in this sequence is obtained as the termination criterion of the compression strategy for the lower part. By using the same strategy for the upper and lower sides, but with different criteria, the termination time of the upper and lower sides may eventually be different. In other words, the strategy of this method is designed mainly for the "strong purpose" of human operation, and the adjustment strategy is to meet the human mouse positioning, rather than adjusting the position of the drag grid through "intelligent" transposition.

[0107] What needs to be said is that by dynamically adjusting the gaps, the available space of the canvas is maximized, so that the drag grid can find a reasonable position without overlapping. This adjustment mechanism avoids the limitations of traditional fixed space layout and realizes intelligent and flexible page layout optimization. The gap where the dividing line is located is enlarged, and the gap before and after the dividing line is compressed, so that the layout can maintain overall balance while releasing space. This orderly enlargement and compression strategy ensures that the page still maintains a uniform and coordinated visual effect after adjustment.

[0108] The design of gradually reducing the compression ratio helps to release necessary space while avoiding excessive compression of other areas, so that the final layout adjustment can not only meet the placement requirements of the drag grid, but also try to maintain the visual balance of the overall page. Under the premise of ensuring the smooth completion of the drag operation, minimize the impact on other grids to ensure that the adjusted layout does not appear crowded or unbalanced, and enhance the user's visual experience. Through intelligent compression and magnification strategies, the spatial distribution of the canvas can be flexibly adjusted, so that the layout can efficiently use the free space at all levels. This design helps to achieve automated and intelligent page layout adjustments and improve the responsiveness of the system.

[0109] During the dragging process, the system dynamically determines the layout adjustment based on the mouse vertical coordinate, ensuring that the user can see the real-time layout changes during the dragging process, improving the intuitiveness and controllability of the operation. Through precise gap adjustment and intelligent feedback mechanism, users can feel the immediate effect of the operation, enhance the accuracy and smoothness of the dragging operation, and improve the overall user experience.

[0110] In the case of insufficient free space, when the dividing line passes through the placed grid, the currently dragged grid is in an unplaceable state and the current position is not updated; when the dividing line does not pass through the placed grid, the length Q of the continuous gap where the dividing line is located is p Amplify and at the same time Q1, Q2...Q p-1 and Q p+1 , Q p+2 ...Q q All are compressed to 0. After the compression is completed, the intrinsic size of the placed grid is compressed. The compression ratio on both sides of the dividing line is gradually reduced from 100% at the beginning according to the compression step of 0.01% until there is no stacking, and then the compression ratio is stopped. During the compression process, the mouse is allowed to drag the grid, and compression continues according to the final mouse position.

[0111] What needs to be said is that by adjusting the length of the gap part and compressing the size of the placed grid, enough free space is dynamically released so that the dragged grid can be placed reasonably on the canvas. By adjusting the progressive compression ratio, the layout is gradually balanced during the adjustment process to avoid imbalanced space utilization and visual disharmony. Allowing the mouse to drag the grid and continue to compress it makes the layout adjustment synchronized with the user operation, improving the smoothness of the dragging process and the immediate feedback of the operation.

[0112] On the other hand, this embodiment also provides a component visualization front-end page automatic layout system, which includes:

[0113] The collection unit captures the user's dragging actions on components in the visual front-end interface.

[0114] Calculate the unit, by capturing the drag action and the grid size of the component, and calculate the area covered by the grid when moving.

[0115] The adjustment unit automatically adjusts the page layout according to the space compression strategy selected when dragging the grid.

[0116] If the above functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program codes.

[0117] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as an ordered list of executable instructions for implementing logical functions, and can be embodied in any computer-readable medium for use by an instruction execution system, device or apparatus (such as a computer-based system, a system including a processor, or other system that can fetch instructions from an instruction execution system, device or apparatus and execute instructions), or in conjunction with such instruction execution systems, devices or apparatuses. For the purposes of this specification, "computer-readable medium" can be any device that can contain, store, communicate, propagate or transmit a program for use by an instruction execution system, device or apparatus, or in conjunction with such instruction execution systems, devices or apparatuses.

[0118] More specific examples of computer-readable media (a non-exhaustive list) include the following: an electrical connection with one or more wires (electronic device), a portable computer disk case (magnetic device), a random access memory (RAM), a read-only memory (ROM), an erasable and programmable read-only memory (EPROM or flash memory), an optical fiber device, and a portable compact disk read-only memory (CDROM). In addition, the computer-readable medium may even be a paper or other suitable medium on which the program is printed, since the program may be obtained electronically, for example, by optically scanning the paper or other medium, followed by editing, deciphering or, if necessary, processing in another suitable manner, and then stored in a computer memory.

[0119] It should be understood that the various parts of the present invention can be implemented by hardware, software, firmware or a combination thereof. In the above-mentioned embodiments, a plurality of steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented by hardware, as in another embodiment, it can be implemented by any one of the following technologies known in the art or their combination: a discrete logic circuit having a logic gate circuit for implementing a logic function for a data signal, a dedicated integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc.

[0120] Example 2 is an embodiment of the present invention, which provides a method for automatic layout of component visualization front-end pages. In order to verify the beneficial effects of the present invention, scientific demonstration is carried out through economic benefit calculation and simulation experiments.

[0121] The present invention can significantly improve the efficiency of design arrangement, especially when it needs to be completed quickly, and has obvious competitive advantages. The average error rate is significantly lower than that of traditional methods, indicating that the present invention can effectively reduce human errors in the design arrangement process and improve the accuracy and reliability of the design. In addition, the completion time, error rate and design completeness of each design of the present invention are also highly stable and perform consistently. Traditional methods, whether through manual adjustment one by one or global adjustment of AI, have a large risk of abnormalities, and the present invention can effectively avoid such risks through its high stability. In summary, the present invention can be superior to existing methods in terms of comprehensive performance.

[0122] It should be noted that the above embodiments are only used to illustrate the technical solution of the present invention rather than to limit it. Although the present invention is described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical solution of the present invention can be modified or replaced by equivalents without departing from the spirit and scope of the technical solution of the present invention, which should be included in the scope of the claims of the present invention. With the help of the visual drag engine, even non-professional developers can quickly generate front-end page layouts, significantly reducing the threshold for front-end development. There is no need to write a lot of code, which effectively shortens the development cycle and reduces costs, greatly improving development efficiency.

Claims

1. A component visualization front-end page automatic layout method, characterized in that: include: In the visual front-end interface, capture the user's dragging action on the component; Using the captured dragging motion and the grid size of the component, calculate the area covered by the grid as it moves; Automatically adjust the page layout according to the space compression strategy selected when dragging the grid; The space compression strategy includes entering into a stack detection and position adjustment process when setting not to perform space compression; In the non-compression mode, check one by one whether there is any overlap between the currently dragged grid and other placed grids on the canvas; if overlap is detected, the currently dragged grid is in an unplaceable state and the current position is not updated; If no stacking is found, after confirming the placement, the grid position is updated and this round of position adjustment ends; When vertical space compression is enabled, stacking detection is used to check whether there is any stacking between the currently dragged grid and other placed grids on the canvas. If no stacking is found, after confirming the placement, the grid position is updated and this round of position adjustment ends; if stacking is detected, whether there is enough free space in the vertical direction to accommodate the dragged grid is analyzed; if there is enough free space, the page layout is automatically adjusted by compressing the free space; if there is not enough free space, the page layout is automatically adjusted by compressing the free space and the grid in the vertical direction; The stack detection includes taking the intersection of the area FG covered by the currently dragged grid with the areas covered by other placed grids on the canvas one by one, expressed as: FG∩BG i =PG i Among them, BG i represents the area covered by the i-th placed grid, i represents the index of the placed grid, i∈(0,I), I is the number of other placed grids on the canvas, PG i Represents the intersection of the area covered by the currently dragged grid and the area covered by the i-th placed grid; if PG i If it is an empty set, it means there is no stack; if PG i If it is not an empty set, it means there is a stack.

2. The component visualization front-end page automatic layout method according to claim 1, characterized in that: The components include functional modules used to build user interfaces in front-end development.

3. The component visualization front-end page automatic layout method according to claim 2, characterized in that: Each component is an independent module, which has preset functions by presetting codes and resources inside the component.

4. The component visualization front-end page automatic layout method according to claim 3, characterized in that: By integrating high-frequency business components, a component library is constructed; in the process of constructing the component library, a component registration page is used to set a default width and height, as well as a minimum width and minimum height of each component; Users can select the required components from the registered component library by dragging and dropping, and directly apply them to the layout in the form of a grid.

5. The component visualization front-end page automatic layout method according to claim 4, characterized in that: The calculation of the area covered by the grid during movement includes: when the user starts a drag operation on the grid, the system captures the current position of the mouse in real time; taking the current position of the mouse as the midpoint, unfolding the grid, and calculating the area covered by the grid during the movement to obtain the current coverage area; Assume the absolute coordinates of the mouse on the screen are (Xm, Ym); The width of the grid is Km and the length is Cm. The size can be set through the front end before dragging the grid.

6. The component visualization front-end page automatic layout method according to claim 5, characterized in that: The current coverage area FG is described by the constraints of the horizontal axis and the vertical axis; The constraint of the horizontal axis is expressed as: The constraint of the ordinate is expressed as: Among them, FG x Indicates the horizontal axis area of ​​the current coverage area FG, FG y Indicates the vertical coordinate area of ​​the current coverage area FG.

7. The component visualization front-end page automatic layout method according to claim 6, characterized in that: Through the boundary checking mechanism, it is determined whether the edge of the grid has exceeded the boundary set by the canvas; If it is determined to be beyond the boundary, the current drag operation is terminated immediately, the original position of the grid is kept unchanged, and this round of layout adjustment process ends; after confirming that the grid is completely within the canvas range, the system makes a judgment based on the preset space compression strategy.

8. The component visualization front-end page automatic layout method according to claim 7, characterized in that: The boundary checking mechanism includes: assuming the absolute coordinates of the upper left corner of the canvas as (Xc, Yc); the size of the canvas: width Wc and height Hc; When any of the four criteria is met, it is considered to have exceeded the boundaries set by the canvas; The four types of determinations include: There is a horizontal coordinate greater than Xc+Wc in the coverage area FG; There is a horizontal coordinate smaller than Xc in the coverage area FG; There is a vertical coordinate greater than Yc in the coverage area FG; There is a vertical coordinate smaller than Yc-Hc in the coverage area FG.

9. The component visualization front-end page automatic layout method according to claim 8, characterized in that: The analyzing whether there is enough free space in the vertical direction to accommodate the dragged grid includes directly performing free space analysis when the placed grids in the canvas are arranged in one column; when the placed grids in the canvas are arranged in more than one column, obtaining the left and right boundaries of the current dragged grid, specifically: The left boundary (Xc, y) represents the straight line with the horizontal coordinate Xc; the right boundary (Xc+Wc, y) represents the straight line with the horizontal coordinate Xc+Wc; where y represents an arbitrary vertical coordinate; Collect all placed grids between the left boundary and the right boundary. If all collected placed grids do not exceed the left boundary and the right boundary, and the placed grids between the left boundary and the right boundary are arranged in one column, then only perform free space analysis on the placed grids between the left boundary and the right boundary. If all the collected placed grids do not exceed the left boundary and the right boundary, but the placed grids between the left boundary and the right boundary are arranged in more than one row, then only the placed grids between the left boundary and the right boundary are subjected to global vertical space analysis; If all the collected placed grids exceed the left boundary or the right boundary, when the left boundary exceeds the boundary, the left boundary is extended to the left until there are no placed grids exceeding the boundary on the left side; when the right boundary exceeds the boundary, the right boundary is extended to the right until there are no placed grids exceeding the boundary on the right side; After the boundary expansion is completed, the left boundary and the right boundary are updated, and it is re-determined whether the placed grids between the left boundary and the right boundary are arranged in only one column. When there is only one column, free space analysis is performed on the placed grids between the left boundary and the right boundary; when there is more than one column, global vertical space analysis is performed on the placed grids between the left boundary and the right boundary; The free space analysis includes calculating the gap between every two grids and accumulating the gaps to obtain the sum of the gaps; JX=J0+JX 1,2 +JX 2,3 ...+JX j-1,j +X0 Where J0 is the distance between the upper border of the canvas and the topmost grid; X0 is the distance between the lower border of the canvas and the bottommost grid; JX is the distance between the upper border of the canvas and the bottommost grid. j-1,j represents the gap between the j-1th and jth grids; j represents the number of grids between the left boundary and the right boundary; JX represents the gap sum, if JX>Cm, it is determined that there is enough free space to accommodate the dragged grid; if JX≤Cm, it is determined that there is not enough free space to accommodate the dragged grid; The global vertical space analysis consists of accumulating the adjustable gaps starting from the top of the canvas: Among them, KX represents the cumulative result of the adjustable gap. If KX>Cm, it is determined that there is enough free space to accommodate the dragged grid; if KX≤Cm, it is determined that there is not enough free space to accommodate the dragged grid; f(y) represents the recognition function. Between the left boundary and the right boundary, if the straight line where the input y value is located does not pass through the placed grid, then f(y)=1; if the straight line where the input y value is located passes through any placed grid, then f(y)=0.

10. The component visualization front-end page automatic layout method according to claim 9, characterized in that: The automatic adjustment includes identifying a portion where f(y)=1 between the left boundary and the right boundary by identifying a function f(y), and recording the length of each continuous gap portion in order as: Q1, Q2, ..., Q q ; Among them, Q q represents the length of the qth continuous gap part, where q is the number of continuous gap parts; The line where the vertical coordinate Ym of the mouse on the screen is located is the dividing line; If there is enough free space, when the dividing line passes through the placed grid, the currently dragged grid is in an unplaceable state and the current position is not updated; when the dividing line does not pass through the placed grid, the length Q of the continuous gap where the dividing line is located is p Amplify and adjust Q p Previous Q1, Q2...Q p-1 , and Q p After Q p+1 , Q p+2 ...Q q The compression ratios on both sides of the dividing line are reduced from 100% at the beginning with a compression step of 0.01% until there is no stacking and BY ≥ MBY, then the compression ratio is stopped; Among them, BY represents the shortest vertical distance between the straight line where the upper and lower edges of the currently dragged grid are located and the straight line where the edges of the placed grid are located; MBY represents the minimum value of the length of the continuous gap part in the current compression state; In the case of insufficient free space, when the dividing line passes through the placed grid, the currently dragged grid is in an unplaceable state and the current position is not updated; when the dividing line does not pass through the placed grid, the length Q of the continuous gap where the dividing line is located is p Amplify and at the same time Q1, Q2...Q p-1 and Q p+1 , Q p+2 ...Q q All are compressed to 0. After the compression is completed, the intrinsic size of the placed grid is compressed. The compression ratio on both sides of the dividing line is gradually reduced from 100% at the beginning according to the compression step of 0.01% until there is no stacking, and then the compression ratio is stopped; During compression, the mouse is allowed to drag the grid and compression will continue based on the final mouse position.

11. A component visualization front-end page automatic layout system using the method according to any one of claims 1 to 10, characterized in that: The collection unit captures the user's dragging action on the component in the visual front-end interface; The calculation unit calculates the area covered by the grid when moving, by capturing the drag action and the grid size of the component; The adjustment unit automatically adjusts the page layout according to the space compression strategy selected when dragging the grid.

12. A computer device comprising: A memory and a processor; the memory stores a computer program, wherein the processor implements the steps of any method according to claims 1-10 when executing the computer program.

13. A computer-readable 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 according to any one of claims 1 to 10 are implemented.

Images