A method and system for merging layout windows based on mouse framing

Abstract

This invention discloses a method and system for merging layout windows based on mouse selection. The method includes establishing an event listener and entering a selection standby state, setting coordinate scroll offset correction and boundary clipping rules; recording the starting coordinates and entering the selection state when the mouse is pressed; determining the position and size of the rectangle based on the starting and current coordinates during mouse movement, and displaying the selection range in real time as a semi-transparent element within the layout container; obtaining the final coordinates of the rectangle when the mouse is released, traversing the layout window set, and determining the set of hit windows according to the overlap relationship between the bounding rectangles of each window and the rectangle; calculating the minimum bounding boundary based on the four corner coordinates of the hit window set, and generating a target merged window with the boundary parameter; removing the hit windows from the layout container and integrating their displayed content into the target merged window area. This invention solves the problems of low efficiency, inaccurate prediction, and poor judgment in existing multi-window batch merging methods.

Description

Technical Field

[0001] This invention relates to the technical field of front-end interface interaction, and in particular to a method and system for merging layout windows based on mouse selection. Background Technology

[0002] Current solutions for multi-window layout management on the web mainly fall into two categories: one relies on a button-triggered pairwise merging process, where users must first select one window and then select the others one by one, after which the system generates a new boundary covering both; the other relies on keyboard shortcuts and multi-selection, where a selection set is built up by clicking one by one and then merged all at once. While these solutions can complete the merging, in batch scenarios, the interaction still mainly involves multiple clicks, making it difficult to determine the range and confirm the result in a single operation. Furthermore, there is a lack of visual pre-judgment feedback that directly corresponds to the final coverage area before merging, making it easy for users to misselect or miss selections near the boundary. At the same time, boundary determination generally relies on simple coordinate values ​​and traversal, which can easily lead to inaccurate merging ranges when dealing with dense windows and scroll offsets. Some implementations are also limited by specific front-end frameworks or keyboard shortcut mechanisms, resulting in limited compatibility across browsers and different operating system environments. Summary of the Invention

[0003] The purpose of this application is to propose a method and system for merging layout windows based on mouse selection, so as to solve the technical problems of poor efficiency, accuracy and compatibility of merging multiple windows.

[0004] To address the aforementioned technical problems, this application provides a method for merging layout windows based on mouse selection, employing the following technical solution:

[0005] A method for merging layout windows based on mouse selection, applied to a browser page with a layout container and multiple layout windows, each layout window having a corresponding bounding rectangle, includes the following steps:

[0006] Establish an event listener and enter the box selection standby state; set coordinate scroll offset correction and boundary clipping rules.

[0007] When a mouse button is detected, the starting coordinates are recorded and the selection box is entered.

[0008] The position and size of the rectangle are determined based on the starting and current coordinates during mouse movement, and the selected area is displayed in real time as a semi-transparent element within the layout container;

[0009] When the mouse is released, the final coordinates of the rectangle are obtained, the layout window set is traversed, and the set of hit windows is determined according to the overlap relationship between the outer rectangle of each window and the rectangle.

[0010] The minimum bounding boundary is determined based on the four corner coordinates of the hit window set, and a target merge window with that boundary parameter is generated.

[0011] Remove the hit window from the layout container, integrate its displayed content into the target merged window area, and update the layout description data structure and stacking order. If no hit window is detected, cancel the rendering of the rectangle and maintain the existing layout.

[0012] In one possible implementation, the step of obtaining the final coordinates of the rectangle when the mouse is released, traversing the set of layout windows, and determining the set of hit windows according to the overlap relationship between the bounding rectangles of each window and the rectangle specifically includes:

[0013] A candidate window set is established based on the boundary relationship between the rectangle and the bounding rectangle of each layout window;

[0014] Calculate the ratio of the overlap area between the candidate window and the rectangle to the area of ​​the window, and compare it with a preset first threshold. If the ratio is not less than the first threshold, it is determined as a hit.

[0015] When multiple windows simultaneously meet the hit condition, deduplication is performed according to the stacking order, and the first visible one is retained.

[0016] In one possible implementation, the step of establishing a candidate window set based on the boundary relationship between the rectangle and the bounding rectangles of each layout window further includes:

[0017] The layout container is divided into grid buckets using a spatial partitioning index to locate windows that are in adjacent buckets to the rectangle as initial candidates;

[0018] Perform neighborhood expansion on the initial candidates to include windows that are adjacent to the boundary but do not fall into the bucket;

[0019] Remove windows that are hidden or outside the visible area to reduce the number of candidates.

[0020] In one possible implementation, before the step of recording the starting coordinates and entering the selection state upon detecting a mouse press, the method further includes:

[0021] Construct a window index table to record the identifier, bounding rectangle, stacking order, and layout container of each window;

[0022] Subscribe to window size and position change events, and incrementally update the index table when a change is detected;

[0023] Record the scroll offset as the page scrolls and provide it to the coordinate correction rules.

[0024] In one possible implementation, the step of calculating the minimum bounding boundary based on the four corner coordinates of the hit window set and generating a target merged window with the boundary parameter specifically includes:

[0025] Align the boundaries of the target merge window with the preset grid of the layout container;

[0026] Edge snapping is performed when the distance between the merge boundary and the container edge or the adjacent non-merging window is less than the preset gap;

[0027] After verification, the outer margin after merging is not less than the preset margin value. If it is insufficient, the boundary is finely adjusted along the shortest direction.

[0028] In one possible implementation, after the step of verifying and merging the outer margin to be no less than a preset margin value, and then finely adjusting the boundary along the shortest direction if it is insufficient, the method further includes:

[0029] Detect whether the target merging window overlaps with the windows that are not involved in the merging. If so, prioritize displacement along the direction consistent with the normal of the overlapping area until the overlap is eliminated.

[0030] When displacement would cause the target merge window size to cross the layout container boundary, reduce the target merge window size according to priority to meet the minimum gap requirement;

[0031] The displacement and scaling adjustments are written into the layout description data structure to maintain consistency in subsequent layout calculations.

[0032] In one possible implementation, the steps of removing the hit window from the layout container, integrating its displayed content into the target merged window area, updating the layout description data structure and stacking order, and canceling the rendering of the rectangle and maintaining the existing layout if no hit window is detected, specifically include:

[0033] Organize and integrate the content according to the spatial order of the hit window from the top left to the bottom right in the original layout;

[0034] Migrate the interaction state and visibility settings of each hit window to the corresponding area of ​​the target merged window;

[0035] Set the target merge window as the focus and update the stacking order;

[0036] If no window is detected as a hit, the rectangle is de-rendered and the temporary cache associated with the selection is cleared.

[0037] To address the aforementioned technical problems, this application also provides a system for merging layout windows based on mouse selection, employing the following technical solution:

[0038] A system for merging layout windows based on mouse selection includes:

[0039] The module is used to establish event listeners and enter the box selection standby state, and to set coordinate scroll offset correction and boundary clipping rules;

[0040] The recording module is used to record the starting coordinates and enter the selection state when the mouse is pressed.

[0041] The presentation module is used to determine the position and size of the rectangle based on the starting and current coordinates during mouse movement, and to present the selected area in real time as a semi-transparent element within the layout container;

[0042] The determination module is used to detect when the mouse is lifted, obtain the final coordinates of the rectangle, traverse the set of layout windows, and determine the set of hit windows according to the overlap relationship between the outer rectangle of each window and the rectangle.

[0043] The generation module is used to calculate the minimum bounding boundary based on the four corner coordinates of the hit window set and generate a target merged window with that boundary parameter.

[0044] The integration module is used to remove the hit window from the layout container, integrate its display content into the target merged window area, and update the layout description data structure and stacking order. If no hit window is detected, the rectangle is removed from the display and the existing layout is maintained.

[0045] To address the aforementioned technical problems, this application also provides a computer device that employs the following technical solution:

[0046] A computer device includes a memory and a processor, the memory storing computer-readable instructions, the processor executing the computer-readable instructions to implement the steps of the method for merging layout windows based on mouse selection as described above.

[0047] To address the aforementioned technical problems, this application also provides a computer-readable storage medium, employing the technical solution described below:

[0048] A computer-readable storage medium storing computer-readable instructions that, when executed by a processor, implement the steps of the method for merging layout windows based on mouse selection as described above.

[0049] Compared with the prior art, the embodiments of this application have the following main advantages:

[0050] The method for merging layout windows based on mouse selection disclosed in this application achieves real-time visibility of the range and overlap detection under unified coordinate caliber and boundary clipping constraints by triggering a single mouse selection. It generates a merged window based on the minimum bounding boundary obtained from the hit set, completes the migration of content and interaction state, and synchronously updates layout data and stacking order. This makes the merged range WYSIWYG, with compact boundaries and does not disturb the missed areas and existing layout. It solves the problems of low efficiency, lack of prediction and inaccurate judgment in the existing multi-window batch merging, and improves cross-environment adaptability and interaction smoothness. Attached Figure Description

[0051] To more clearly illustrate the solutions in this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below. Obviously, the accompanying drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0052] Figure 1 This is a flowchart of an embodiment of the method for merging layout windows based on mouse selection according to this application;

[0053] Figure 2 This is a schematic diagram of a system for merging layout windows based on mouse selection according to this application;

[0054] Figure 3 This is a schematic diagram of the structure of one embodiment of the computer device according to this application. Detailed Implementation

[0055] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0056] refer to Figure 1 The diagram illustrates a flowchart of an embodiment of a method for merging layout windows based on mouse selection according to this application. The method includes the following steps:

[0057] Step S101: Establish an event listener and enter the box selection standby state, and set the coordinate scroll offset correction and boundary clipping rules.

[0058] In this embodiment, after the page loads, event listeners for mouse press, move, and release are first established, and the selection standby state is entered. At the same time, coordinate scroll offset correction rules and boundary clipping rules are agreed upon to ensure that all subsequent coordinate readings are still comparable and controllable when scrolling and container boundaries exist, avoiding judgment distortion caused by out-of-bounds or inconsistent standards (the starting settings of listener-correction-clipping are consistent with the native event model).

[0059] Step S102: When the mouse is pressed, the starting coordinates are recorded and the selection box is entered.

[0060] In this embodiment, when the user presses the mouse, the system immediately records the starting coordinates and switches the internal state to "selected box". This step provides the starting point data and timing trigger conditions for the subsequent dynamic drawing of rectangles and hit recognition.

[0061] Step S103: During mouse movement, determine the position and size of the rectangle based on the starting coordinates and the current coordinates, and display the selection area in real time as a semi-transparent element within the layout container.

[0062] In this embodiment, while the user holds down the mouse and moves, the system continuously reads the current position, determines the position and size of the rectangle together with the starting point, and restricts the rectangle within the layout container boundary, presenting it in real time as a semi-transparent element; this "what you see is what you get" visual preview allows the user to intuitively outline the target area, and provides stable geometric input for subsequent hit recognition.

[0063] Step S104: When the mouse is released, obtain the final coordinates of the rectangle, traverse the set of layout windows, and determine the set of hit windows according to the overlap relationship between the outer rectangle of each window and the rectangle.

[0064] In this embodiment, when the user lifts the mouse, the rectangle is fixed at the final coordinates. The system then begins to traverse the existing set of layout windows on the page and determines the set of windows to be hit based on whether there is any overlap between the bounding rectangle of each window and the fixed rectangle. In engineering implementation, a quick filter can be performed first (such as only checking candidates that intersect with the rectangle range) and then a precise overlap determination can be made to avoid including windows that only touch the edge or do not intersect at all in the set of windows to be hit, thereby ensuring the accuracy of subsequent merging of objects.

[0065] Step S105: Calculate the minimum bounding boundary based on the four corner coordinates of the hit window set, and generate a target merged window with the bounding boundary parameter.

[0066] In this embodiment, after obtaining the set of hit windows, the system reads the coordinates of the four corners of these windows, calculates the minimum bounding boundary that covers all hit windows, and generates a new target merged window using this boundary parameter. The design of selecting the minimum bounding boundary ensures that the new window does not miss the display area of ​​any hit window, while avoiding unnecessary expansion of the range, thus ensuring that the layout after merging is compact and the boundary is predictable.

[0067] Step S106: Remove the hit window from the layout container, integrate its display content into the target merged window area, and update the layout description data structure and stacking order. If no hit window is detected, cancel the rendering of the rectangle and maintain the existing layout.

[0068] In this embodiment, the system removes the original hit window from the layout container and migrates and integrates its displayed content into the area of ​​the target merged window. Simultaneously, it updates the layout description data structure and stacking order to reflect this change. If the lift does not hit any window, the rectangle is removed and the existing layout remains unchanged to ensure that an invalid selection does not have side effects on the page state. For example, the data visualization workbench simultaneously opens four windows: line chart A, bar chart B, log panel C, and table D. The user presses down from the upper left of A and drags it through the areas of B and D before lifting it. During the movement phase, the system continuously provides a semi-transparent preview to help the user fine-tune the range. After lifting, it recognizes that A, B, and D overlap with the rectangle while C does not, so the hit set is {A, B, D}. The new window boundary is taken from the global minimum and maximum of the four corner coordinates of the three, generating the target merged window and integrating the content of the three, while C remains unchanged. If the user only drags a small rectangle in a blank area, no window will be hit, the rectangle is removed, and the layout remains unchanged.

[0069] This application achieves real-time visibility of the range and overlapping hit recognition by triggering a single mouse selection, under unified coordinate caliber and boundary clipping constraints. Based on the hit set, it calculates the minimum bounding boundary to generate a merged window, completes the content and interaction state migration, and synchronously updates the layout data and stacking order. This makes the merged range WYSIWYG, with compact boundaries and without disturbing the missed areas and existing layout. It comprehensively solves the problems of low efficiency, inaccurate prediction, and poor judgment in existing multi-window batch merging, and correspondingly improves cross-environment adaptability and interaction smoothness.

[0070] In some optional implementations of this embodiment, the steps of obtaining the final coordinates of the rectangle when the mouse is released, traversing the layout window set, and determining the set of hit windows according to the overlap relationship between the bounding rectangles of each window and the rectangle specifically include:

[0071] A candidate window set is established based on the boundary relationship between the rectangle and the bounding rectangle of each layout window;

[0072] Calculate the ratio of the overlap area between the candidate window and the rectangle to the area of ​​the window, and compare it with a preset first threshold. If the ratio is not less than the first threshold, it is determined as a hit.

[0073] When multiple windows simultaneously meet the hit condition, deduplication is performed according to the stacking order, and the first visible one is retained.

[0074] In this embodiment, a candidate set is first quickly established based on the boundary relationship between the bounding rectangle and the bounding rectangle of each window, which is equivalent to a "coarse screening" to exclude windows that do not intersect at all, thus avoiding the calculation of the overlap ratio for all windows. Then, the "ratio of the area of ​​the window covered by the bounding rectangle to the area of ​​the window itself" is calculated for the candidate set and compared with a preset threshold. Only windows with a ratio not less than the threshold are confirmed as hits, thereby avoiding windows that are only slightly touched by the edges from being mistakenly included in the merge set. When multiple windows meet the threshold condition at the same time, duplicates are removed according to the stacking order, and only the most visible one is retained. This can eliminate the "competition" between windows stacked vertically on the same screen position for the hit, ensuring that the recognition result is consistent with the foreground window that is actually visible on the user's screen at this moment, and reducing the false merging rate.

[0075] In some optional implementations of this embodiment, the step of establishing a candidate window set based on the boundary relationship between the rectangle and the bounding rectangles of each layout window further includes:

[0076] The layout container is divided into grid buckets using a spatial partitioning index to locate windows that are in adjacent buckets to the rectangle as initial candidates;

[0077] Perform neighborhood expansion on the initial candidates to include windows that are adjacent to the boundary but do not fall into the bucket;

[0078] Remove windows that are hidden or outside the visible area to reduce the number of candidates.

[0079] In this embodiment, after dividing the layout container into grid buckets, windows in the buckets containing the rectangle or adjacent buckets can be directly located as initial candidates, greatly reducing the number of windows that need to participate in accurate calculations. Considering that windows may cross buckets or be attached to edges, neighborhood expansion is performed to include windows that are near the boundary but not currently falling into a bucket, avoiding omissions caused by bucket boundaries. At the same time, windows in a hidden state (display: none / visibility: hidden / zero size) and windows that exceed the visible area are removed to avoid invalid calculations and unnecessary subsequent layout fluctuations.

[0080] In some optional implementations of this embodiment, before the step of recording the starting coordinates and entering the selection state when the mouse is pressed, the method further includes:

[0081] Construct a window index table to record the identifier, bounding rectangle, stacking order, and layout container of each window;

[0082] Subscribe to window size and position change events, and incrementally update the index table when a change is detected;

[0083] Record the scroll offset as the page scrolls and provide it to the coordinate correction rules.

[0084] In this embodiment, a window index table is constructed and its identifier, bounding rectangle, stacking order, and container are recorded, so that subsequent traversal and hits rely on structured data rather than temporary DOM measurements; window size and position change events are subscribed to (e.g., using ResizeObserver / MutationObserver / application layer callbacks) and incremental updates are performed to ensure that the index is consistent with the actual interface and avoid misjudgments caused by "outdated geometry"; at the same time, page scroll offset is recorded and provided to coordinate correction rules to ensure that the coordinates of the three time points of pressing, moving, and lifting are consistent, eliminating reference drift caused by scrolling.

[0085] In some optional implementations of this embodiment, the step of calculating the minimum bounding boundary based on the four corner coordinates of the hit window set and generating a target merged window with the boundary parameter specifically includes:

[0086] Align the boundaries of the target merge window with the preset grid of the layout container;

[0087] Edge snapping is performed when the distance between the merge boundary and the container edge or the adjacent non-merging window is less than the preset gap;

[0088] After verification, the outer margin after merging is not less than the preset margin value. If it is insufficient, the boundary is finely adjusted along the shortest direction.

[0089] In this embodiment, the new boundary is first aligned to a preset grid so that the boundary coordinates fall on discrete grid points, which facilitates compatibility with existing grid systems or snapping rules and avoids generating "half-pixel / non-integer" boundaries that are difficult to reuse. When the new boundary is close to the edge of the container or an adjacent window that has not participated in merging, if the distance is less than the preset gap, edge snapping is triggered to fit the boundary to the standard spacing and ensure consistent visual spacing. After snapping is completed, it is checked whether the outer margin is still greater than or equal to the minimum margin value. If it is insufficient, it is fine-tuned along the shortest direction, prioritizing the squeezing out of necessary white space without reducing readability.

[0090] In some optional implementations of this embodiment, after the step of verifying and merging the outer margin to be no less than the preset margin value, and then finely adjusting the boundary along the shortest direction if it is insufficient, the method further includes:

[0091] Detect whether the target merging window overlaps with the windows that are not involved in the merging. If so, prioritize displacement along the direction consistent with the normal of the overlapping area until the overlap is eliminated.

[0092] When displacement would cause the target merge window size to cross the layout container boundary, reduce the target merge window size according to priority to meet the minimum gap requirement;

[0093] The displacement and scaling adjustments are written into the layout description data structure to maintain consistency in subsequent layout calculations.

[0094] In this embodiment, if an overlap with an external window is detected, the new window is translated along the normal direction of the overlapping area first, and the shortest separation vector is selected to resolve the overlap at the lowest cost. When continuing to translate will cause an out-of-bounds error (exceeding the container boundary), the size of the new window is reduced according to priority (e.g., shortening the long side first, then the short side) to restore the minimum gap within the boundary. Finally, the translation and scaling adjustments are written back to the layout description data structure (including position, size, snapping state, etc.) to ensure that subsequent rendering, persistence, and undo / redo logic are based on consistent data.

[0095] In some optional implementations of this embodiment, the steps of removing the hit window from the layout container, integrating its displayed content into the target merged window area, updating the layout description data structure and stacking order, and canceling the rendering of the rectangle and maintaining the existing layout if no hit window is detected, specifically include:

[0096] Organize and integrate the content according to the spatial order of the hit window from the top left to the bottom right in the original layout;

[0097] Migrate the interaction state and visibility settings of each hit window to the corresponding area of ​​the target merged window;

[0098] Set the target merge window as the focus and update the stacking order;

[0099] If no window is detected as a hit, the rectangle is de-rendered and the temporary cache associated with the selection is cleared.

[0100] In this embodiment, the interaction state and visibility settings of each hit window are migrated to the corresponding area of ​​the new window, including scroll position, selected item, expand / collapse, input focus, etc., to avoid the cognitive gap of "returning to the initial state" after merging; the newly generated target merged window is set as the focus and promoted to the foreground stacking order to ensure that the keyboard and mouse event routing is correct and the visual hierarchy is clear; if no window is hit in this lift, the presentation of the rectangle is canceled and the temporary cache related to this selection (such as the overlay DOM, candidate set, coordinate snapshot and throttling handle) is cleared, and the selection is restored to the idle state without changing the existing layout, thereby ensuring "zero side effects of invalid operation".

[0101] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by instructing related hardware through computer-readable instructions. These computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above methods. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, optical disk, or read-only memory (ROM), or random access memory (RAM).

[0102] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.

[0103] Further reference Figure 2 As a response to the above Figure 1 The implementation of the method shown in this application provides an embodiment of a system for merging layout windows based on mouse selection, which is similar to... Figure 1 Corresponding to the method embodiments shown, the system can be specifically applied to various electronic devices.

[0104] like Figure 2 As shown, the system 200 for merging layout windows based on mouse selection in this embodiment includes: a creation module 201, a recording module 202, a presentation module 203, a determination module 204, a generation module 205, and an integration module 206. Wherein:

[0105] Establish module 201 to establish event listeners and enter the box selection standby state, and set coordinate scroll offset correction and boundary clipping rules;

[0106] The recording module 202 is used to record the starting coordinates and enter the selection state when the mouse is pressed.

[0107] The presentation module 203 is used to determine the position and size of the rectangle based on the starting coordinates and the current coordinates during mouse movement, and to present the selection area in real time as a semi-transparent element within the layout container.

[0108] The determination module 204 is used to obtain the final coordinates of the rectangle when the mouse is lifted, traverse the set of layout windows, and determine the set of hit windows according to the overlap relationship between the outer rectangle of each window and the rectangle.

[0109] The generation module 205 is used to calculate the minimum bounding boundary based on the four corner coordinates of the hit window set and generate a target merged window with the boundary parameter.

[0110] The integration module 206 is used to remove the hit window from the layout container, integrate its display content into the target merged window area, and update the layout description data structure and stacking order. If no hit window is detected, the rectangle is canceled and the existing layout is maintained.

[0111] The system for merging layout windows based on mouse selection provided in this embodiment of the invention can implement all the processes of the method for merging layout windows based on mouse selection in the above embodiments. The functions and technical effects of each module in the device are the same as those of the method for merging layout windows based on mouse selection in the above embodiments, and will not be repeated here.

[0112] To address the aforementioned technical problems, embodiments of this application also provide a computer device. Please refer to [link / reference needed]. Figure 3 , Figure 3 This is a basic structural block diagram of the computer device in this embodiment.

[0113] The computer device 3 includes a memory 31, a processor 32, and a network interface 33 that are interconnected via a system bus. It should be noted that only a computer device 3 with a memory 31, a processor 32, and a network interface 33 is shown in the figure; however, it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented alternatively. Those skilled in the art will understand that the computer device described here is a device capable of automatically performing numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes, but is not limited to, microprocessors, application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.

[0114] The computer device can be a desktop computer, laptop, handheld computer, or cloud server, etc. The computer device can interact with the user via a keyboard, mouse, remote control, touchpad, or voice control.

[0115] The memory 31 includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 31 may be an internal storage unit of the computer device 3, such as the hard disk or memory of the computer device 3. In other embodiments, the memory 31 may also be an external storage device of the computer device 3, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device 3. Of course, the memory 31 may also include both the internal storage unit and its external storage device of the computer device 3. In this embodiment, the memory 31 is typically used to store the operating system and various application software installed on the computer device 3, such as computer-readable instructions based on the method of merging layout windows by mouse selection. In addition, the memory 31 can also be used to temporarily store various types of data that have been output or will be output.

[0116] In some embodiments, the processor 32 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip. The processor 32 is typically used to control the overall operation of the computer device 3. In this embodiment, the processor 32 is used to execute computer-readable instructions stored in the memory 31 or to process data, for example, to execute computer-readable instructions for the method of merging layout windows based on mouse selection.

[0117] The network interface 33 may include a wireless network interface or a wired network interface, which is typically used to establish communication connections between the computer device 3 and other electronic devices.

[0118] The computer device provided in this application achieves real-time visibility of the range and overlapping hit recognition under a unified coordinate system and boundary clipping constraints, triggered by a single mouse selection. It generates a merged window based on the minimum bounding boundary of the hit set, completes the migration of content and interactive state, and synchronously updates the layout data and stacking order. This makes the merged range WYSIWYG, with compact boundaries and without disturbing the missed areas and existing layout. It comprehensively solves the problems of low efficiency, inaccurate prediction, and poor judgment in existing multi-window batch merging, and correspondingly improves cross-environment adaptability and interactive smoothness.

[0119] This application also provides another embodiment, namely, providing a computer-readable storage medium storing computer-readable instructions that can be executed by at least one processor to cause the at least one processor to perform the steps of the method for merging layout windows based on mouse selection as described above.

[0120] The computer-readable storage medium provided in this application achieves real-time visibility of the range and overlapping hit recognition under a unified coordinate system and boundary clipping constraints, triggered by a single mouse selection. It generates a merged window based on the minimum bounding boundary of the hit set, completes the migration of content and interactive state, and synchronously updates the layout data and stacking order. This makes the merged range WYSIWYG, with compact boundaries and without disturbing the missed areas and existing layout. It comprehensively solves the problems of low efficiency, inaccurate prediction, and poor judgment in existing multi-window batch merging, and correspondingly improves cross-environment adaptability and interactive smoothness.

[0121] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part 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 ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0122] The above are merely preferred embodiments of this application and are not intended to limit this application. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A method for merging layout windows based on mouse selection, applied to a browser page with a layout container and multiple layout windows, each layout window having a corresponding bounding rectangle, characterized in that, Includes the following steps: Establish an event listener and enter the box selection standby state; set coordinate scroll offset correction and boundary clipping rules. When a mouse button is detected, the starting coordinates are recorded and the selection box is entered. The position and size of the rectangle are determined based on the starting and current coordinates during mouse movement, and the selected area is displayed in real time as a semi-transparent element within the layout container; When the mouse is released, the final coordinates of the rectangle are obtained. The layout window set is traversed, and the set of hit windows is determined according to the overlap relationship between the bounding rectangle of each window and the rectangle. Specifically, this includes: establishing a set of candidate windows based on the boundary relationship between the rectangle and the bounding rectangle of each layout window; calculating the ratio of the overlap area of ​​the candidate window and the rectangle to the area of ​​the candidate window, comparing it with a preset first threshold, and determining a hit if the ratio is not less than the first threshold; when multiple windows meet the hit condition at the same time, deduplication is performed according to the stacking order and the first visible one is retained. The minimum bounding boundary is calculated based on the four corner coordinates of the hit window set, and a target merged window with the parameters of the minimum bounding boundary is generated. Specifically, this includes: aligning the boundary of the target merged window with the preset grid of the layout container; performing edge snapping when the distance between the merged boundary and the edge of the container or between adjacent non-merged windows is less than a preset gap; verifying whether the outer margin after merging is not less than the preset margin value, and if not, fine-tuning the boundary along the shortest direction; detecting whether the target merged window overlaps with non-merged windows, and if so, prioritizing displacement along the direction consistent with the normal of the overlapping area until the overlap is eliminated; when displacement will cause the target merged window to cross the boundary of the layout container, reducing the size of the target merged window according to priority to meet the minimum gap requirement; and writing the displacement and scaling adjustments into the layout description data structure to maintain consistency in subsequent layout calculations. Remove the hit window from the layout container, integrate its displayed content into the target merged window area, and update the layout description data structure and stacking order. If no hit window is detected, cancel the rendering of the rectangle and maintain the existing layout.

2. The method for merging layout windows based on mouse selection according to claim 1, characterized in that, The step of establishing a candidate window set based on the boundary relationship between the rectangle and the bounding rectangles of each layout window further includes: The layout container is divided into grid buckets using a spatial partitioning index to locate windows that are in adjacent buckets to the rectangle as initial candidates; Perform neighborhood expansion on the initial candidates to include windows that are adjacent to the boundary but do not fall into the bucket; Remove windows that are hidden or outside the visible area to reduce the number of candidates.

3. The method for merging layout windows based on mouse selection according to claim 1, characterized in that, Before the step of recording the starting coordinates and entering the selection state when the mouse is pressed, the method further includes: Construct a window index table to record the identifier, bounding rectangle, stacking order, and layout container of each window; Subscribe to window size and position change events, and incrementally update the index table when a change is detected; Record the scroll offset as the page scrolls and provide it to the coordinate correction rules.

4. The method for merging layout windows based on mouse selection according to claim 1, characterized in that, The steps of removing the hit window from the layout container, integrating its displayed content into the target merged window area, updating the layout description data structure and stacking order, and canceling the rendering of the rectangle and maintaining the existing layout if no hit window is detected, specifically include: Organize and integrate the content according to the spatial order of the hit window from the top left to the bottom right in the original layout; Migrate the interaction state and visibility settings of each hit window to the corresponding area of ​​the target merged window; Set the target merge window as the focus and update the stacking order; If no window is detected as a hit, the rectangle is de-rendered and the temporary cache associated with the selection is cleared.

5. A system for merging layout windows based on mouse selection, characterized in that, include: The module is used to establish event listeners and enter the box selection standby state, and to set coordinate scroll offset correction and boundary clipping rules; The recording module is used to record the starting coordinates and enter the selection state when the mouse is pressed. The presentation module is used to determine the position and size of the rectangle based on the starting and current coordinates during mouse movement, and to present the selected area in real time as a semi-transparent element within the layout container; The determination module is used to detect when the mouse is lifted, obtain the final coordinates of the rectangle, traverse the set of layout windows, and determine the set of hit windows according to the overlap relationship between the bounding rectangle of each window and the rectangle. Specifically, it includes: establishing a set of candidate windows based on the boundary relationship between the rectangle and the bounding rectangle of each layout window; calculating the ratio of the overlap area of ​​the candidate window and the rectangle to the area of ​​the candidate window, comparing it with a preset first threshold, and determining a hit if the ratio is not less than the first threshold; when multiple windows meet the hit condition at the same time, deduplication is performed according to the stacking order and the first visible one is retained. The generation module is used to calculate the minimum bounding boundary based on the four corner coordinates of the hit window set, and generate a target merged window with the parameters of the minimum bounding boundary. Specifically, it includes: aligning the boundary of the target merged window with the preset grid of the layout container; performing edge snapping when the distance between the merged boundary and the edge of the container or between adjacent non-merged windows is less than a preset gap; verifying whether the outer margin after merging is not less than the preset margin value, and if it is insufficient, fine-tuning the boundary along the shortest direction; detecting whether the target merged window overlaps with non-merged windows, and if so, prioritizing displacement along the direction consistent with the normal of the overlapping area until the overlap is eliminated; when the displacement will cause it to cross the boundary of the layout container, reducing the size of the target merged window according to priority to meet the minimum gap requirement; and writing the displacement and scaling adjustments into the layout description data structure to maintain consistency in subsequent layout calculations. The integration module is used to remove the hit window from the layout container, integrate its display content into the target merged window area, and update the layout description data structure and stacking order. If no hit window is detected, the rectangle is removed from the display and the existing layout is maintained.

6. A computer device, characterized in that, The device includes a memory and a processor, wherein the memory stores computer-readable instructions, and the processor executes the computer-readable instructions to implement the steps of the method for merging layout windows based on mouse selection as described in any one of claims 1 to 4.

7. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the method for merging layout windows based on mouse selection as described in any one of claims 1 to 4.

Images