An Adaptive Separated Surface Layout Method Based on Asynchronous Frame Scheduling

Abstract

This invention discloses an adaptive split-panel layout method based on asynchronous frame scheduling, applicable to split-panel components in web applications. The method includes: rendering a multi-panel area divided by separator lines on the page; initializing panel sizes; registering drag events for the separator lines and size change listeners for the parent container and / or browser window; updating temporary size states based on pointer displacement during dragging; registering size update tasks through the browser animation frame scheduling interface when temporary sizes change; synchronizing the latest temporary sizes to the actual size states all at once and driving interface rendering when a rendering frame arrives; and adaptively adjusting the sizes of each panel according to preset constraint rules when dragging ends or a change in the parent container size is detected. This method can reduce rendering overhead, improve drag smoothness, ensure consistency between component states and interface display, and enhance the adaptive capability of split-panel layout in high-frequency interaction scenarios.

Description

Technical Field

[0001] This invention belongs to the field of human-computer interaction and graphical user interface layout control technology, specifically relating to an adaptive partitioned surface layout method based on asynchronous frame scheduling. Background Technology

[0002] As web applications become increasingly complex, the need for interface segmentation and adaptive layout is becoming more prominent. In modern enterprise systems, data visualization platforms, and integrated development environments (IDEs), "splitter panels" have become a core component for achieving multi-area collaborative display, dynamic size adjustment, and efficient space utilization. Their performance and adaptability directly affect the human-computer interaction efficiency and user experience of web applications.

[0003] In traditional web front-end development, the implementation of divider panels has obvious limitations, mainly falling into two categories:

[0004] Static layout: The size of each panel area is fixed by HTML and CSS (such as flex layout or grid layout). Although it is simple to implement, it cannot respond to the dynamic needs of users to adjust the area ratio by dragging. It has very poor flexibility and is only suitable for simple scenarios where the layout is completely fixed. It is difficult to adapt to complex interaction needs.

[0005] DOM event-driven: This approach uses native JavaScript to listen for mouse events such as mousedown, mousemove, and mouseup, and directly manipulates the width or height properties of DOM elements in the event callbacks to achieve drag-and-drop separation functionality. However, this method has three major drawbacks: First, direct synchronous manipulation of the DOM lacks a unified state management mechanism, making it prone to state chaos and significantly increasing maintenance difficulty in complex scenarios such as nested panels and cross-region linkage. Second, the high-frequency triggering of mousemove events during dragging causes browser reflow and repaint with each event callback, resulting in performance bottlenecks, manifested as page lag and unsmooth dragging actions. Third, the technical architecture conflicts with the "data-driven DOM" concept advocated by modern front-end frameworks (such as React and Vue), making seamless integration with these frameworks difficult and prone to issues where the internal state of components is out of sync with the UI visual presentation.

[0006] Currently, mainstream interface divider panel components have undergone partial optimization based on traditional solutions, but have not yet broken through the core technology bottlenecks. They can be roughly divided into two categories:

[0007] Implementations based on synchronous events and direct DOM manipulation: A typical example is the jQuery UI Splitter component and some early web framework plugins. The implementation process is fixed in three steps: First, register the mouse event for the drag handle, establishing a connection between user interaction and panel size adjustment; then, when the mousemove event is triggered, instantly modify the relevant panel's style.width or style.height property to provide real-time feedback on the dragging effect; finally, remove the event listener after the drag ends (mouseup event is triggered) to avoid resource consumption. The drawbacks of this approach are significant: It lacks a throttling mechanism for the frequently triggered mousemove event, leading to a large number of DOM operations stacked in a short period, resulting in poor performance and noticeable stuttering during dragging; simultaneously, the UI state and component logical state are completely separated, lacking data linkage, easily leading to mismatches such as "panel size has changed but component state has not updated," making subsequent feature expansion and troubleshooting extremely difficult.

[0008] Controlled component solutions based on modern front-end frameworks: Represented by community-open-source components such as react-split-pane and react-resizable, this approach optimizes the size using the concept of "component state management." Its core logic is: storing panel size data through component state (such as React's useState hook), modifying state values ​​via event callbacks during dragging, and then automatically driving DOM updates by the front-end framework to achieve "data-UI" linkage. However, this solution still has performance shortcomings: some components lack asynchronous throttling mechanisms for high-frequency drag events, and frequent state changes (setState calls) trigger a large number of virtual DOM diff calculations and framework synchronous rendering processes; especially when the panel contains large data lists, complex charts, or dynamically loaded content, the synchronous rendering mechanism of frameworks like React struggles to handle the high-frequency update demands, resulting in a significant decrease in drag smoothness and even temporary interface freezes. Taking the react-split-pane component as an example (refer to its open source code on GitHub), although the component has a complete structure of "left and right / top and bottom panels and drag handles" and can manage size through state, it still relies on the framework to execute rendering logic synchronously when the state changes frequently, and the performance limitation problem has not been fundamentally solved.

[0009] In summary, existing mainstream implementations of divider panel components share common shortcomings: either they employ a direct synchronous DOM manipulation approach, leading to performance bottlenecks; or, while optimized based on modern frameworks, they lack efficient event throttling and frame scheduling mechanisms, making it difficult to balance interactive responsiveness and rendering performance. For modern web applications requiring high performance, complex interactions, and adaptive layouts, existing solutions still have significant shortcomings in terms of drag-and-drop smoothness, state consistency, and overall system performance, failing to meet the high demands of enterprise-level applications for dynamic layouts.

[0010] Further analysis of the core shortcomings of existing technologies reveals that, due to the lack of efficient asynchronous rendering scheduling and event throttling mechanisms, browser performance bottlenecks, UI lag, and data asynchrony are unavoidable in high-frequency interaction scenarios. Furthermore, limited by synchronous processing logic and direct DOM manipulation, existing solutions fall far short of the requirements of modern web applications in terms of adaptability (difficulty in accurately responding to changes in the size of local parent containers, relying solely on global resize events), scalability (significant modifications to core logic are required when adding new layout patterns or interactive functions), and integration capabilities with the modern front-end ecosystem (poor compatibility with different frameworks). These deficiencies directly lead to a decline in user experience, increased development and maintenance difficulty, and ultimately limit the improvement of overall system performance, becoming a key bottleneck restricting the development of web application layout technologies. Summary of the Invention

[0011] In view of the shortcomings of existing technologies, the purpose of this invention is to provide an adaptive split panel layout method based on asynchronous frame scheduling. This method addresses the core defects of existing split panel technologies, such as stuttering and performance bottlenecks caused by synchronous direct manipulation of DOM elements during high-frequency drag-and-drop interactions, inconsistencies between component internal states and interface display, low accuracy in adapting to changes in parent container and browser window sizes, and insufficient integration with modern front-end frameworks. By introducing an asynchronous frame scheduling mechanism between drag-and-drop events and size state management, high-frequency events are merged and throttled. The split panel size is updated in batches only when the browser renders frames. Combined with a unified state management and rendering update strategy, this achieves smooth display of the split panel during drag-and-drop and a high degree of consistency between component states and the actual interface.

[0012] Meanwhile, by designing an adaptive response mechanism for changes in the local size of the parent container and global window changes, as well as a modular divider panel layout architecture, the divider panel component can accurately adapt to various layout scenarios without relying on underlying synchronous DOM operations. This facilitates integration into different front-end frameworks and supports subsequent functional expansion. Thus, while ensuring smooth interaction and rendering performance, it enhances the adaptability, scalability, and engineering feasibility of the divider panel layout solution. This meets the actual needs of modern Web applications such as enterprise-level management systems, data visualization platforms, and integrated development environments for high-performance dynamic layout and complex interactions, improving user experience and enhancing overall system performance.

[0013] To achieve the above objectives, the technical solution adopted by this invention is as follows: an adaptive split panel layout method based on asynchronous frame scheduling, applicable to split panel components in web applications, comprising the following steps:

[0014] (1) Initialization and registration of listeners: Render at least two panel areas separated by separator lines in the target page, bind drag event listeners to the separator lines and set the initial size of each panel; register size change listeners for the parent container and / or browser window of the separator panels so that adaptive adjustment can be triggered when the size of the parent container and / or browser window changes.

[0015] (2) Drag start: When a user triggers a press event at the dividing line, the initial position of the pointer and the initial size of each target panel are recorded, and the dividing panel component is switched to drag state;

[0016] (3) Calculation of temporary size during dragging: During the dragging process, the pointer displacement is calculated based on the pointer movement event, and the temporary size of the target panel is obtained accordingly. The temporary size is written into the temporary size state to reflect the size change during the dragging process.

[0017] (4) Asynchronous frame scheduling update: When the temporary size state is detected to have changed, the actual size state driving the rendering is not updated immediately. Instead, a size update callback is registered through the asynchronous frame scheduling mechanism. The callback is triggered when the browser drawing frame arrives. The aforementioned temporary size changes are merged within a single drawing frame, and the actual size state is updated only once with the latest temporary size.

[0018] (5) Layout calculation and rendering: Based on the actual size status updated in step (4), calculate the width and / or height style of each panel, apply the actual size to the panel and the dividing line and trigger the re-rendering of the dividing panel area to present a smooth size adjustment effect;

[0019] (6) Drag end and adaptive adjustment: When the drag end event is detected at the separator line, the pointer event listener related to drag is released, and the current actual size state is retained as the final layout result of this drag; when the size of the parent container of the separator panel is detected to change, the actual size of each panel is recalculated according to the preset size constraint rules and the layout update is triggered, so that the separator panel maintains the expected layout ratio and available space distribution in the scenario of the parent container size change.

[0020] The temporary size state is used to record size changes during dragging, and the actual size state serves as the sole size data driving interface rendering. The asynchronous frame scheduling mechanism merges multiple temporary size changes generated during dragging to reduce the pressure on the browser's main thread while ensuring smooth interaction.

[0021] Furthermore, the temporary size state and the actual size state constitute a dual-state controlled data model for the partition panel size. The temporary size state is used to record the target size change caused by pointer movement during dragging and to provide the latest candidate value for batch updates in the next drawing frame. The actual size state is only updated in batches during asynchronous frame scheduling callbacks and is used to drive layout calculations and interface rendering to ensure a single data source for the partition panel size and consistency between the internal state of the component and the interface display.

[0022] Furthermore, the asynchronous frame scheduling mechanism includes: registering a size synchronization callback by calling the browser-provided animation frame scheduling interface each time the temporary size state changes; canceling the previous size synchronization callback that has not yet been executed when the temporary size state changes again within the same rendering frame cycle, retaining only the latest registered size synchronization callback; reading the latest temporary size state when the size synchronization callback is executed, writing it into the actual size state, and triggering layout calculation and rendering update; the animation frame scheduling interface is an animation frame scheduling interface provided by the browser that is synchronized with the drawing frame.

[0023] Furthermore, the method employs a component-based controlled design, including: storing the temporary size state and the actual size state through a state management unit within the component; restricting panel size changes to be made only through the update interface provided by the state management unit, and prohibiting external direct modification of the panel DOM's size and style; when the actual size state in the state management unit is updated, the front-end rendering framework uniformly drives the synchronous update of the virtual DOM or equivalent rendering tree and the real DOM, thereby avoiding inconsistencies between the state and the interface caused by direct manipulation of the DOM.

[0024] Furthermore, the parent container size change monitoring is implemented through a native size observation mechanism, including: registering the DOM node corresponding to the parent container of the separator panel by calling the size observation interface provided by the browser; when the width and / or height of the parent container changes in the callback of the size observation interface, calculating the new actual size state according to the ratio of the changed container size to the current size of each panel, and writing the new actual size state into the state management unit to trigger a layout update.

[0025] Furthermore, the adaptive adjustment under changes in the size of the parent container includes at least one or more of the following rules: maintaining the relative proportion of each panel in the parent container and linearly scaling the size of each panel according to the new size of the parent container; for panels with minimum or maximum size constraints, prioritizing the size range of the constrained panels during scaling, and then compensating for the remaining panels; when the size of the parent container shrinks to below a threshold, automatically folding panels with lower preset priority and setting their size to zero or a preset minimum value to reserve more space for high-priority panels.

[0026] Furthermore, the layout calculation and rendering includes: using CSS layout methods based on flexible layout and / or grid layout to convert the actual size state into the flexible base size, width and / or height style properties of the panel to adapt to the allocation of the remaining space of the parent container; providing panel collapse and expansion functions, updating the actual size state of the target panel to zero or a preset collapse size when collapsing, and restoring the actual size state to the size recorded before collapsing or the preset default size when expanding, and merging high-frequency state changes through the asynchronous frame scheduling mechanism in the collapse and expansion operations.

[0027] Furthermore, the method supports both horizontal and vertical partitioned panel layout modes. Horizontal partitioned panels use width as the primary adjustment dimension, and the left and right space allocation is achieved by updating the width or flexible base size of each panel. Vertical partitioned panels use height as the primary adjustment dimension, and the top and bottom space allocation is achieved by updating the height or flexible base size of each panel. For nested layouts that contain both horizontal and vertical partitioning relationships, size listeners and state management are independently registered on each level of parent container.

[0028] Furthermore, in addition to being implemented based on the animation frame scheduling interface, the asynchronous frame scheduling mechanism can also employ at least one of the following alternative or supplementary schemes to merge and throttle size state changes caused by high-frequency drag events: throttling based on timestamps or scheduling based on timers, where an actual size update is submitted only when the time interval since the last actual size update exceeds a preset threshold when a pointer movement event is triggered; throttling or debouncing operators based on reactive programming libraries, where drag events are streamed and throttling, debouncing, or auditing operators are used to control the size update frequency; and multiple size change requests during the drag process are added to a queue based on an internal task queue and a custom scheduler, where a unified scheduler processes the size updates in the queue in batches when adapting to the browser rendering rhythm.

[0029] The present invention adopts the above technical solution, and the specific beneficial effects are as follows:

[0030] In existing technologies, synchronous modifications to the DOM or triggering of frame-based synchronous rendering during high-frequency events such as `mousemove` can easily lead to a large number of reflows and repaints in a short period, resulting in noticeable page lag. This invention introduces a temporary size state and asynchronous frame scheduling mechanism. Multiple temporary size changes generated during dragging are first written into the temporary size state, without immediately driving rendering. Only when a browser rendering frame arrives, the aforementioned temporary changes are merged within a single rendering frame using the browser's animation frame scheduling interface, updating the actual size state with the latest temporary size at once, achieving at most one layout update per frame. If necessary, strategies such as time-interval throttling, timer scheduling, or task queue batch processing can be combined to further control the update frequency. Therefore, even in scenarios with complex panel content, multi-level nesting, or large data rendering, it can effectively reduce the pressure on the browser's main thread from high-frequency rendering, significantly alleviate lag, and achieve the goal of improving the smoothness and performance of drag-and-drop interaction in split panels.

[0031] In existing panel technology, the lack of unified state management often leads to situations where panel size changes but the component's internal state is not updated, or state chaos occurs when multiple panels are linked. This invention employs a dual-state controlled data model of temporary and actual size states, combined with a component-based controlled design: size changes during dragging only update the temporary size state, providing candidate values ​​for the next drawing frame; the actual size state is only updated in batches during asynchronous frame scheduling callbacks and is the sole size data source driving layout calculations and UI rendering. Furthermore, direct external modification of the panel DOM size and style is prohibited; all size changes are completed through a unified entry point in the state management unit. This design eliminates the risk of inconsistencies between different sets of states and DOMs, ensuring a high degree of consistency between the component's internal state and the actual UI interface, and reducing maintenance difficulty in complex layouts and multi-scene linkage.

[0032] Existing solutions often rely on global resize events, failing to precisely detect changes in the size of a specific parent container. This leads to delayed responses and layout errors during local layout adjustments. This invention utilizes the browser's native size monitoring mechanism to listen for the size of the DOM nodes corresponding to the parent containers of the dividers. When a change in the width and / or height of the parent container is detected, the actual size of each panel is recalculated and a layout update is triggered, based on the current actual size state and preset adaptive rules (including linear scaling to maintain the relative proportions of each panel, compensation adjustments prioritizing minimum / maximum size constraints, and automatically collapsing low-priority panels when the size shrinks below a threshold). This mechanism can accurately respond to changes in the size of local parent containers and also cover global scenarios such as browser window scaling. It supports horizontal, vertical, and multi-level nested divider layouts, maintaining the stability and rationality of the divider panel layout under various container shapes and window changes.

[0033] In the background, traditional divider panel solutions based on direct DOM manipulation or synchronous rendering often require extensive adaptation and modification when integrating with modern frameworks such as React and Vue. Furthermore, adding features like vertical dividers, nested layouts, and collapsible / expanded functionality frequently necessitates modifications to the core logic. This invention employs a modular, loosely coupled architecture, breaking down drag-and-drop event listening, state management, asynchronous frame scheduling, size observation, adaptive rules, and layout rendering into independently evolving functional units. These are connected through a unified data and event flow, allowing the divider panel to be smoothly integrated as a controlled component into mainstream front-end frameworks. Simultaneously, the methodological level reserves extension capabilities for horizontal / vertical dividers, nested layouts, and panel collapsible / expanded functionality. Subsequent expansion of various layout modes or interaction forms can be achieved through parameter configuration or extended submodules on top of the existing state management and scheduling mechanisms, without rewriting the core algorithm. Therefore, the system significantly reduces integration and secondary development costs in enterprise applications while ensuring performance and stability.

[0034] This invention addresses the performance bottlenecks, insufficient adaptability, inconsistent states, and difficulties in integration and expansion mentioned in the background section. Through key technologies such as asynchronous frame scheduling, a dual-state controlled model, native size monitoring, and modular component architecture, it establishes a complete technical loop across four dimensions: drag-and-drop interaction smoothness, state consistency, adaptive accuracy, and engineering integration capabilities. This significantly reduces the number of reflows and redraws in high-frequency interaction scenarios, improves drag-and-drop smoothness, ensures interface stability and layout rationality through unified state management and precise size monitoring, and provides ample expansion space for various advanced functions such as horizontal / vertical / nested layouts and folding / expanding. Ultimately, it effectively meets the practical needs of modern Web applications such as enterprise management systems, data visualization platforms, and integrated development environments for high-performance dynamic layouts and complex interactions, achieving a dual improvement in user experience and overall system performance. Attached Figure Description

[0035] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0036] Figure 1 This is a flowchart of the adaptive partitioned surface layout method of the present invention.

[0037] Figure 2 This is a schematic diagram of the partition plate system structure of the present invention.

[0038] Figure 3 This is a flowchart of the adaptive partitioned surface layout method based on asynchronous frame scheduling of the present invention. Detailed Implementation

[0039] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present invention. Rather, they are merely examples of apparatuses and methods consistent with some aspects of the invention as detailed in the appended claims.

[0040] Example 1

[0041] like Figure 1 As shown, this embodiment provides an adaptive split panel layout method based on asynchronous frame scheduling, applicable to split panel components in web applications, including the following steps:

[0042] (1) Initialization and registration of listeners: Render at least two panel areas separated by separator lines in the target page, bind drag event listeners to the separator lines and set the initial size of each panel; register size change listeners for the parent container and / or browser window of the separator panels so that adaptive adjustment can be triggered when the size of the parent container and / or browser window changes.

[0043] (2) Drag start: When a user triggers a press event at the dividing line, the initial position of the pointer and the initial size of each target panel are recorded, and the dividing panel component is switched to drag state;

[0044] (3) Calculation of temporary size during dragging: During the dragging process, the pointer displacement is calculated based on the pointer movement event, and the temporary size of the target panel is obtained accordingly. The temporary size is written into the temporary size state to reflect the size change during the dragging process.

[0045] (4) Asynchronous frame scheduling update: When the temporary size state is detected to have changed, the actual size state driving the rendering is not updated immediately. Instead, a size update callback is registered through the asynchronous frame scheduling mechanism. The callback is triggered when the browser drawing frame arrives. The aforementioned temporary size changes are merged within a single drawing frame, and the actual size state is updated only once with the latest temporary size.

[0046] (5) Layout calculation and rendering: Based on the actual size status updated in step (4), calculate the width and / or height style of each panel, apply the actual size to the panel and the dividing line and trigger the re-rendering of the dividing panel area to present a smooth size adjustment effect;

[0047] (6) Drag end and adaptive adjustment: When the drag end event is detected at the separator line, the pointer event listener related to drag is released, and the current actual size state is retained as the final layout result of this drag; when the size of the parent container of the separator panel is detected to change, the actual size of each panel is recalculated according to the preset size constraint rules and the layout update is triggered, so that the separator panel maintains the expected layout ratio and available space distribution in the scenario of the parent container size change.

[0048] The temporary size state is used to record size changes during dragging, and the actual size state serves as the sole size data driving interface rendering. The asynchronous frame scheduling mechanism merges multiple temporary size changes generated during dragging to reduce the pressure on the browser's main thread while ensuring smooth interaction.

[0049] As one implementation method, the temporary size state and the actual size state in this embodiment constitute a dual-state controlled data model for separating panel sizes. The temporary size state is used to record the target size changes caused by pointer movement during dragging and to provide the latest candidate values ​​for batch updates in the next drawing frame. The actual size state is only updated in batches during asynchronous frame scheduling callbacks and is used to drive layout calculations and interface rendering to ensure a single data source for separating panel sizes and consistency between the internal state of components and the interface display. This avoids size state disorder and mismatch issues such as the interface changing but the state not changing in complex scenarios such as multi-pane nesting and cross-region linkage, thereby improving the stability of the overall layout performance. This dual-state model completely avoids the problems of state mismatch and state chaos caused by direct DOM manipulation in traditional solutions, ensuring that the internal size data of components is highly consistent with the UI display, greatly reducing the maintenance difficulty in complex layout scenarios, and providing clear data layering logic for subsequent batch updates of asynchronous frame scheduling.

[0050] As one implementation method, the asynchronous frame scheduling mechanism described in this embodiment includes: registering a size synchronization callback by calling the browser-provided animation frame scheduling interface each time the temporary size state changes; canceling the previously unexecuted size synchronization callback and retaining only the latest registered size synchronization callback when the temporary size state changes again within the same rendering frame cycle; reading the latest temporary size state during the execution of the size synchronization callback, writing it into the actual size state, and triggering layout calculation and rendering updates; the animation frame scheduling interface is a browser-provided animation frame scheduling interface synchronized with the drawing frame, thereby merging the high-frequency size updates generated by dragging into low-frequency batch updates consistent with the browser rendering rhythm, effectively reducing the number of reflows and repaints, alleviating main thread blocking, and improving stuttering issues in high-frequency interactive scenarios. This mechanism ensures that only one size synchronization and rendering operation is performed within each browser rendering frame, effectively reducing the number of reflows and repaints caused by high-frequency mousemove events, avoiding the browser main thread being blocked due to frequent updates, and maintaining the smoothness of dragging operations even in scenarios where large data lists or complex charts are loaded within the panel, significantly improving the interactive performance of the split panel.

[0051] As one implementation method, the method described in this embodiment adopts a component-based controlled design, including: storing the temporary size state and the actual size state through a state management unit inside the component; restricting panel size changes to only be performed through the update interface provided by the state management unit, and disallowing direct external modification of the panel DOM size and style; when the actual size state in the state management unit is updated, the front-end rendering framework uniformly drives the synchronous update of the virtual DOM or equivalent rendering tree and the real DOM, thereby avoiding the inconsistency between state and interface caused by direct DOM manipulation. This facilitates the smooth integration of this method into modern front-end frameworks such as React and Vue as a reusable partitioned panel component, and only the state and rendering logic need to be adjusted when expanding functionality or adjusting interaction rules in the future, reducing maintenance and iteration costs. This controlled design strictly follows the data-driven DOM concept of modern front-end frameworks, eliminates the risk of external code directly modifying the panel DOM size, ensures that all size changes are controlled through a unified data flow, fundamentally solves the inconsistency problem of one set of states and another set of DOMs in traditional solutions, and improves the reusability and maintainability of the component in different front-end projects.

[0052] As one implementation method, the parent container size change monitoring in this embodiment is implemented through a native size observation mechanism, including: registering the DOM node corresponding to the parent container of the partition panel by calling the size observation interface provided by the browser; when the width and / or height of the parent container changes in the callback of the size observation interface, calculating the new actual size state according to the ratio of the changed container size to the current size of each panel, and writing the new actual size state into the state management unit to trigger a layout update. This allows for accurate perception of the size change of the local parent container without relying on the global window resize event, achieving real-time adaptive adjustment of the local layout and avoiding response lag or layout disorder caused by relying solely on global events. Compared with the traditional approach of indirectly judging size changes by relying on the global window.resize event, the native size observation mechanism can directly and in real-time capture the local size change of the parent container, with faster response and higher accuracy. It avoids the problem of panel layout adaptation lag or disorder when adjusting the local container, and is especially suitable for complex interface scenarios with multiple nested panels and dynamic adjustment of local areas.

[0053] As one implementation method, the adaptive adjustment under changes in the size of the parent container in this embodiment includes at least one or more of the following rules: maintaining the relative proportion of each panel within the parent container and linearly scaling the size of each panel according to the new parent container size; for panels with minimum or maximum size constraints, prioritizing the size range of the constrained panels during scaling, and then compensating for the remaining panels; when the parent container size shrinks below a threshold, automatically folding panels with lower preset priority and setting their size to zero or the preset minimum value to reserve more space for high-priority panels. This ensures that key content is displayed first, while low-priority areas are appropriately shrunk or folded under different screen sizes, window scaling, and complex business layouts, balancing layout stability and interface usability, and avoiding content crowding or obstruction. These adaptive rules ensure that when the parent container size changes, the divider panels maintain a reasonable proportion of each panel (e.g., linear scaling), avoid abnormal panel sizes (e.g., exceeding the minimum / maximum range) through priority constraints, and ensure the availability of core functional areas by folding low-priority panels when space is insufficient, comprehensively improving the robustness of the divider panels in dynamic layout environments.

[0054] As one implementation method, the layout calculation and rendering in this embodiment includes: using a CSS layout method based on flexible layout and / or grid layout to convert the actual size state into the flexible base size, width and / or height style attributes of the panel to adapt to the remaining space allocation of the parent container; providing panel folding and unfolding functions, updating the actual size state of the target panel to zero or a preset folding size when folding, and restoring the actual size state to the size recorded before folding or the preset default size when unfolding, and merging high-frequency state changes through the asynchronous frame scheduling mechanism in the folding and unfolding operations, so that the partitioned panel can make full use of the visible space in large screen scenes, and maintain a clean interface through folding and adaptive layout when the screen is small or the window is shrunk, reducing the impact of frequent folding / unfolding operations on rendering performance.

[0055] As one implementation method, the method described in this embodiment supports both horizontal and vertical partition panels. Horizontal partition panels primarily adjust width, allocating left and right space by updating the width or flexible base size of each panel. Vertical partition panels primarily adjust height, allocating top and bottom space by updating the height or flexible base size of each panel. For nested layouts containing both horizontal and vertical partitions, size listeners and state management are independently registered on each parent container. This enables multi-level, mixed-direction partition layout control in complex business interfaces, allowing different areas to adaptively adjust within their respective local areas while maintaining overall layout consistency and a unified interactive experience. This design allows partition panels to flexibly adapt to the horizontal layout of left and right menus and middle content in enterprise-level management systems, the vertical layout of charts and bottom data on data visualization platforms, and complex layouts with multiple nested areas in integrated development environments (IDEs). It eliminates the need to develop independent components for different layout modes, significantly improving the solution's scenario adaptability.

[0056] As one implementation method, the asynchronous frame scheduling mechanism described in this embodiment, in addition to being implemented based on the animation frame scheduling interface, can also employ at least one of the following alternative or supplementary schemes to achieve the merging and throttling of size state changes caused by high-frequency drag events: throttling based on timestamps or scheduling based on timers, where an actual size update is submitted only when the time interval since the last actual size update exceeds a preset threshold when a pointer movement event is triggered; throttling or debouncing operators based on reactive programming libraries, where drag events are streamed and throttling, debouncing, or auditing operators are used to control the size update frequency; and throttling and debouncing, where multiple size change requests during dragging are added to a queue based on an internal task queue and a custom scheduler, and a unified scheduler processes the size updates in the queue in batches when adapting to the browser's rendering rhythm. Thus, even in environments where support for the animation frame interface is limited or drag logic is complex, alternative schemes can still achieve similar high-frequency event throttling and batch update effects, improving the adaptability of this method across different technology stacks and browser environments. These alternative schemes further broaden the applicable scenarios of the asynchronous frame scheduling mechanism. For example, timestamp-based throttling can be adapted to older browsers that do not support requestAnimationFrame, reactive programming library operators can be compatible with projects using technology stacks such as RxJS, and custom task queues can meet complex scenarios with special requirements for scheduling logic. This ensures that the present invention can achieve merging and throttling of high-frequency size changes in different technical environments, and guarantees interactive performance.

[0057] This embodiment provides a systematic solution to problems such as severe lag under high-frequency drag-and-drop interaction, inconsistency between state and interface, insufficient adaptive capability of parent container, and difficulty in maintaining complex layouts. It forms an integrated technical solution from performance optimization and state consistency to adaptive layout and engineering integration capabilities, providing a high-performance, easy-to-integrate, and scalable partitioned layout implementation path for modern Web applications such as enterprise management systems, data visualization platforms, and integrated development environments.

[0058] Example 2

[0059] This embodiment provides an adaptive partitioned surface layout system based on asynchronous frame scheduling to implement the above method, which includes at least:

[0060] The drag event listener module is used to register and process user drag input on the separator lines of the separator panel. It records the initial position of the pointer and the initial size of the panel when the drag starts, calculates the temporary size of the target panel based on the pointer movement during the drag, and releases the drag-related event listeners when the drag ends.

[0061] By centrally managing drag-and-drop events at the separator level, this system can uniformly handle drag-and-drop logic across multiple input methods such as mouse and touch, avoiding the repetitive processing and maintenance complexity caused by directly binding events to multiple panel nodes.

[0062] The state management module is used to maintain the temporary and actual size states of the partition panel, and provides a read and write interface for the size states, so that the actual size states serve as the sole data source for driving the interface rendering.

[0063] By centralizing the size state in the state management module and limiting the actual size state to the only rendering data source, the problem of "inconsistency between the internal state of the component and the interface display" in the existing technology can be avoided, which facilitates unified debugging and expansion in complex nested layouts or multi-partition combination scenarios.

[0064] The asynchronous frame scheduling module is used to register or update the size synchronization callback when the temporary size state changes. Before the browser starts drawing frames, the latest temporary size is synchronized to the actual size state in batches, thereby merging and processing multiple size changes caused by high-frequency drag events.

[0065] This module significantly reduces the number of reflows and redraws by merging and throttling high-frequency temporary size changes, performing batch synchronization only once before the browser's drawing frame arrives. This reduces the amount of time spent on the browser's main thread during dragging, thereby improving the smoothness of the divider panel in high-frequency interaction scenarios.

[0066] The rendering and layout module is used to calculate and set the width and / or height style of each panel according to the actual size status, use the layout engine to rearrange and render the partitioned panels, and realize interactive features such as panel collapsing and unfolding.

[0067] By centralizing layout calculations and specific style settings within the rendering and layout module, the underlying layout method (such as elastic layout or grid layout) can be flexibly replaced or upgraded while maintaining the stability of state management logic. This allows for easy customization of separation methods and folding rules based on different business pages.

[0068] The parent container size monitoring and adaptive module is used to monitor changes in the size of the parent container of the separator panel and / or the browser window. When a change occurs, it triggers a recalculation and update of the actual size state to achieve adaptive adjustment to local and global layout changes.

[0069] By unifying the perception and processing of changes in the size of the parent container and the window within this module, the system can make consistent adaptive adjustment strategies for local container rearrangement, window scaling, and other situations, avoiding the phenomenon of missing local changes due to relying solely on the global resize event.

[0070] The modules mentioned above are connected through a preset data stream and event stream, enabling the system to achieve high-performance layout control and adaptive adjustment of the separator panel in high-frequency drag-and-drop interaction scenarios when executing method steps.

[0071] By establishing clear data flow and event flow agreements between modules, this system can solidify the method flow of Implementation Example 1 into a reusable basic capability, making it easy to reuse the same set of partition layout capabilities across different business pages and reducing redundant development.

[0072] As one implementation method, the asynchronous frame scheduling module in this embodiment specifically includes:

[0073] The animation frame registration subunit is used to register a size synchronization callback by calling the browser's animation frame scheduling interface when a temporary size state change is detected.

[0074] The animation frame cancellation subunit is used to cancel the previous size synchronization callback that has not yet been executed when a new temporary size state update is detected within the same frame period, and only the latest callback is retained;

[0075] The size synchronization subunit is used to read the latest temporary size state and write it to the actual size state when the size synchronization callback is executed, and to notify the rendering and layout module to perform a layout update.

[0076] Through the collaboration of the aforementioned sub-units, the asynchronous frame scheduling module can automatically discard outdated size update requests within the same frame cycle, retaining only the latest valid size state, and covering the entire interactive process during user dragging with the fewest rendering attempts, thereby reducing rendering overhead without sacrificing visual continuity.

[0077] As one implementation method, the state management module in this embodiment is constructed as a dual-state controlled model, including:

[0078] A temporary size status storage unit is used to record the target panel size calculated in real time during the drag-and-drop process;

[0079] The actual size state storage unit is used to store the currently effective panel size, which is read by the rendering and layout modules to drive the interface rendering.

[0080] The state update control unit restricts the actual size state to be updated only by the asynchronous frame scheduling module in the size synchronization callback, and converts all external requests for size modification into requests for updating the temporary size state.

[0081] By introducing a state update control unit, the unified entry constraint for external modifications is to first update the temporary size and then synchronize it to the actual size by the scheduling module. This helps to form a clear state transition path in engineering practice and reduces the hidden defects caused by directly manipulating the DOM by bypassing state management when multiple people are collaborating on development.

[0082] As one implementation method, the parent container size monitoring and adaptation module in this embodiment includes:

[0083] The size observation subunit is used to listen for size changes of the parent container of the divider panel based on the ResizeObserver interface or an equivalent mechanism, and generate size change events when the window-level or local container-level size is adjusted.

[0084] The adaptive calculation subunit is used to calculate the new actual size of each panel when a size change event is received, based on the current actual size status and preset size ratio rules, minimum size / maximum size constraints and folding priority.

[0085] The adaptive update subunit is used to write the new actual size into the actual size state in the state management module and notify the rendering and layout module to perform a layout update.

[0086] By comprehensively considering scaling rules, size constraints, and folding priorities in the adaptive calculation sub-unit, this system can maintain the strategy of prioritizing the display of key areas and shrinking or folding secondary areas according to priority when the parent container is scaled or rearranged, thereby maintaining the readability and usability of the interface layout under different screen and window sizes.

[0087] This embodiment breaks down drag-and-drop event listening, dual-state management, asynchronous frame scheduling, rendering layout, and parent container size listening and adaptation into collaborative system modules. Structurally, it engineers and modularizes the method flow of Embodiment 1, enabling it to be embedded as a universal split-plane layout infrastructure into various web applications. Overall, it achieves high-performance processing of high-frequency drag-and-drop interactions, ensures consistency between component states and interface display, provides fine-grained adaptation to changes in parent container and window size, and offers reusability and scalability across different front-end technology stacks. The system described in this embodiment can effectively support the split-plane layout requirements of complex web applications such as enterprise-level management systems, data visualization platforms, and integrated development environments in actual engineering deployments.

[0088] Example 3

[0089] like Figure 2As shown, this embodiment provides an overall structural principle framework for an adaptive partitioned panel layout system based on asynchronous frame scheduling. The system includes: a drag event listening module, a state management and scheduling module, an asynchronous frame scheduling module, a rendering and layout module, and a parent container size listening and adaptive module. The modules are connected through preset data streams and event streams to jointly complete the size update and adaptive layout of the partitioned panel during the drag process.

[0090] Drag and drop event listener module:

[0091] In this embodiment, the technical implementation scheme of the drag event listening module includes:

[0092] (1) Register mouse or touch events on the divider line (Handle) of the divider panel, including onMouseDown, onMouseMove, and onMouseUp;

[0093] (2) When the drag is detected to start, record the initial pointer position and the current size of each panel, and enter the drag state;

[0094] (3) During the dragging process, continuously calculate the distance the pointer moves and update the temporary size of the panel in real time according to the pointer displacement, such as the temporary width tempWidth or the temporary height tempHeight;

[0095] (4) When the drag ends, uncheck the relevant event listeners and write the final temporary size to the actual panel size state.

[0096] In one specific implementation, referencing React component implementations, the event is bound to the DOM node corresponding to the separator line. The temporary size is obtained by calculating the pointer displacement by reading the event object's event.clientX and / or event.clientY.

[0097] State Management and Scheduling Module:

[0098] In this embodiment, the technical implementation scheme of the state management and scheduling module is as follows:

[0099] (1) Use a controlled state management mechanism (such as React's useState) to store the actual size state and temporary size state of the partition panel respectively;

[0100] (2) During the drag-and-drop process, the temporary size status is updated first, and the actual size status is updated in batches only in the callback of the asynchronous frame scheduling module.

[0101] By employing the above methods, we ensure that the panel size has a single data source and maintain consistency between the internal state of the component and the interface display, thereby solving the synchronization problem caused by directly manipulating the DOM.

[0102] Asynchronous frame scheduling module: In this embodiment, the technical implementation scheme of the asynchronous frame scheduling module includes:

[0103] (1) During the dragging process, whenever the temporary size state changes, it is not immediately synchronized to the actual size state, but an asynchronous callback is registered through requestAnimationFrame;

[0104] (2) If the temporary size changes multiple times within the same browser drawing frame, cancelAnimationFrame to cancel the previous scheduling that has not yet been executed, and only retain the latest scheduling request, so as to ensure that each frame only merges one actual size change.

[0105] (3) Trigger the size synchronization callback before the animation frame starts, batch synchronize the latest temporary size to the actual size state, and trigger the UI rendering update.

[0106] The above design can significantly reduce the rendering pressure caused by high-frequency drag events and improve the smoothness of the drag process.

[0107] Rendering and Layout Module: In this embodiment, the technical implementation scheme of the rendering and layout module is as follows:

[0108] (1) Dynamically calculate the width or height style values ​​of the left and right or top and bottom panels of the partition panel according to the actual size status;

[0109] (2) Use CSS layout (such as flex layout or grid layout) to adapt to the remaining space of the parent container and ensure that the layout of each panel is reasonable;

[0110] (3) Provide panel folding / expanding function. By setting a panel size to 0 or restoring it to the default value, the panel can be folded or expanded. Specifically, it can be combined with animation transition or instant switching to complete the interface effect.

[0111] Parent container size monitoring and adaptive module:

[0112] In this embodiment, the technical implementation scheme of the parent container size monitoring and adaptive module includes:

[0113] (1) Use the parent container size monitoring and adaptive module ResizeObserver interface to monitor the size changes of the corresponding DOM node of the parent container of the divider panel;

[0114] (2) When the size of the parent container is detected to change, the height or width of each panel is automatically adjusted and the component status is updated synchronously to ensure that the partition panel maintains an adaptive layout when the size of the parent container changes.

[0115] (3) The listener supports both browser window-level size changes and local container-level size changes, thereby enabling more precise and timely responses.

[0116] Using the above method, local and global size changes can be accurately captured without relying on global resize events, resulting in faster response and better adaptive performance.

[0117] The system structure and technical implementation of each functional module in this embodiment enable high-performance layout control and adaptive adjustment of the partition panel in high-frequency drag-and-drop interaction scenarios through the collaborative work of modules such as drag-and-drop event listening, state management and scheduling, asynchronous frame scheduling, rendering and layout, and parent container size listening and adaptation.

[0118] Example 4

[0119] This embodiment combines Figure 3 The flowchart shown illustrates the specific implementation process of the adaptive partitioned panel layout method based on asynchronous frame scheduling. This embodiment uses a "horizontal partitioned panel" as an example.

[0120] like Figure 3 As shown, the user drag-and-drop trigger process is as follows: When the user drags the separator line, the system enters the drag-and-drop interaction processing flow. First, the drag-and-drop event capture is executed. When a "movement" event (such as mouse movement event mousemove or pointer movement event pointermove, where mousemove and pointermove are pointer movement event types provided by the browser) is detected during the drag-and-drop process, the temporary size update logic is triggered.

[0121] Temporary size state update: Calculate the temporary size of the panel based on the pointer displacement and write it to the temporary size state. This state is only used for immediate visual feedback during the interaction process and does not directly drive UI (User Interface) rendering.

[0122] Registering animation frame scheduling tasks: After the temporary size status is updated, the system registers the browser's native animation frame interface requestAnimationFrame (the browser animation frame scheduling interface, used to execute callbacks before the next drawing frame in the browser) to schedule batch update tasks of the actual size.

[0123] Animation frame task deduplication: Determine if "a frame has been registered" - If there is an unexecuted animation frame task within the same rendering frame cycle, cancel the previous frame using cancelAnimationFrame (the browser's animation frame cancellation interface, used to cancel unexecuted requestAnimationFrame callbacks), ensuring that only the latest size update task is retained within the same frame; if it has not been registered, proceed directly to the "waiting for the next frame" stage.

[0124] Single-frame batch update of actual size: After entering the browser's frame drawing time, the system reads the latest temporary size state and merges them into batches to update the actual size state. This process achieves the throttling effect of high-frequency temporary size changes and single-frame synchronization, avoiding the blocking of the browser's main thread by frequent rendering.

[0125] Drive UI rendering: After the actual size status is updated, the layout calculation of the divider panel and the UI (user interface) rendering are triggered, presenting a smooth size adjustment effect.

[0126] Drag-and-drop completion judgment and closing: If the drag-and-drop is not finished (the user is still moving the pointer), return to the "drag-and-drop event capture" step to continue the loop; if the drag-and-drop is finished (the user releases the pointer), release the drag-and-drop related event listeners, and solidify the final actual size state to complete the state closing of this interaction.

[0127] The specific steps of this embodiment are as follows.

[0128] Initialization: When the component loads, the default widths of the left and right panels are initialized, and a parent container size listener is registered: The size observation interface ResizeObserver (a native size observation interface used to listen for changes in the size of DOM nodes, where DOM stands for DocumentObjectModel) provided by the browser is used to listen for changes in the size of the parent container of the divider panels. This stage provides the initial size basis for subsequent steps such as "user dragging the divider" and "drag event triggering".

[0129] Start dragging (user drags the separator / drag event triggered): When the user presses the mouse at the separator, corresponding to... Figure 3 The "User Drag Divider" node in the document object model triggers a drag event on the divider DOM node (representing the element node of the divider in the document object model). The corresponding "Drag Event Trigger" node records the initial position of the current pointer and the current width of the left and right panels. The component enters the drag state, providing a reference for subsequent width updates.

[0130] During the drag-and-drop process, the user moves the mouse, corresponding to... Figure 3The "Move" node in the table. When the mouse moves, the system calculates a new temporary width based on the difference between the current pointer position and the initial position, and updates the temporary state using the temporary width update function `setTempWidth` (an update function used to write the temporary width state), corresponding to the "Update Temporary Size State" node. The temporary width can be stored in the variable `tempWidth` (representing the temporary width value during the current dragging process), and is only used to record width changes during dragging.

[0131] Register animation frame scheduling and single frame synchronization

[0132] Whenever the temporary size state changes, the system does not immediately update the actual width. Instead, it calls the browser's animation frame scheduling interface requestAnimationFrame (an animation frame scheduling interface used to execute callbacks before the browser's next drawing frame) and registers a size synchronization callback in the "Register Animation Frame Scheduling (requestAnimationFrame)" node.

[0133] In the "Registered Frames?" node, if an unexecuted animation frame callback is detected within the current frame period, the "Cancel Previous Frame" node uses `cancelAnimationFrame` (an animation frame cancellation interface used to cancel unexecuted `requestAnimationFrame` callbacks) to cancel the previous unexecuted callback, retaining only the most recently registered animation frame callback. The process then proceeds to the "Waiting for Next Frame" node, waiting for the browser to trigger the next drawing frame.

[0134] When the browser draws a frame, the aforementioned animation frame callback is executed. In the "Merge Batch Update Actual Size State" node, the latest temporary width is synchronized to the actual width state all at once, thereby merging all temporary width changes in a single drawing frame. Then, the "Trigger UI Rendering" node is entered, which calculates the width style property of the left and right panels (width is the width style property in CSS) based on the latest actual width state, and drives the separated panel area to perform UI (user interface) rendering to present a smooth size adjustment effect.

[0135] Drag and drop completion and state reset: During the drag and drop loop described above, after each frame is rendered, the process enters... Figure 3 The "Is drag-and-drop finished?" judgment node:

[0136] If the user is still holding down the mouse button, it is assumed that the dragging has not ended, and the process returns to nodes such as "move" and "update temporary size status" to continue execution.

[0137] If the user releases the mouse, indicating the end of the drag, the "Release Event Listener, Return to Normal" node is entered: the mouse movement and mouse release event listeners related to the drag are released, the current temporary width is assigned to the actual width, the current actual size is maintained as the final layout result of this drag operation, and the component exits the drag state.

[0138] Adaptive Adjustment: When the size of the parent container changes, the aforementioned ResizeObserver (the native size observation interface) will automatically capture the change event of the parent container's width or height. After receiving the change, the system updates the panel height or width according to the current panel width and preset layout rules, thereby ensuring that the divider panel can still maintain an adaptive layout when the size of the parent container changes.

[0139] Collapse / Expand: When the user clicks the collapse button, the system directly sets the target panel width to 0, thus collapsing the panel. When it needs to be restored, the target panel width is restored to the default width, thus expanding. This operation can be used in conjunction with the actual width state update mentioned above, so that collapsing and expanding are also driven by size state rendering, realizing the "collapse / expand" function.

[0140] Connections and data flow relationships between modules: In this embodiment, the connections and data flow relationships between modules are as follows: The drag event listening module is responsible for interacting with the user and generating temporary size data (such as the temporary width tempWidth variable) in nodes such as "user drag separator line", "drag event trigger", and "move".

[0141] The state management module maintains temporary and actual size states, providing data support for the rendering and layout modules. The temporary state records real-time changes during dragging, while the actual state drives the final UI (user interface) rendering.

[0142] The asynchronous frame scheduling module connects the drag-and-drop logic and the rendering logic. In the nodes of "Register Animation Frame Scheduling (requestAnimationFrame)", "Cancel Previous Frame (cancelAnimationFrame)", "Wait for Next Frame", and "Merge Batch Update Actual Size State", it performs batch merging of high-frequency state changes and updates the actual size state uniformly within a single frame to ensure efficient rendering.

[0143] The rendering and layout module drives UI changes based on the actual size status. The panel width or height style settings (including CSS style properties such as width) are completed in the "Trigger UI Rendering" node to achieve adaptive layout and effects such as collapsing / expanding.

[0144] The parent container size monitoring module works in conjunction with the state management module through ResizeObserver (the native size observation interface) to automatically adjust the actual size state when the parent container size changes and trigger the corresponding layout update, thus achieving automatic adjustment in scenarios where the container changes.

[0145] A high-frequency interactive throttling rendering mechanism based on asynchronous frame scheduling: Utilizing the browser animation frame scheduling interface requestAnimationFrame (the browser's native animation frame interface), high-frequency interactive events such as dragging are processed asynchronously in batches and rendered in a throttling manner. Size and state changes are merged and processed only once in each frame, significantly improving the smoothness of dragging the split panel and system performance.

[0146] Dual-state controlled data model: The size of the split panel is divided into a temporary state (for immediate feedback and interaction) and an actual state (for driving rendering). The controlled component concept ensures that the interface state is highly consistent with the data source, preventing state synchronization and consistency problems caused by direct manipulation of the DOM in traditional technologies.

[0147] Integrating the native ResizeObserver adaptive layout mechanism: Using ResizeObserver (the native size observation interface) to monitor changes in the size of the parent container in real time, the divider panel can achieve high-precision adaptive adjustment to local and global layout changes, solving the problem of weak adaptive capabilities of traditional layout components;

[0148] Highly scalable and integrable framework design: It adopts a modular technical architecture, which is easy to integrate with front-end frameworks such as React and Vue. It supports multiple layout modes, both horizontal and vertical, as well as dynamic collapsing / expanding functions, making it suitable for complex and ever-changing web scenarios.

[0149] In this embodiment, by using the above-described process and modules, the following technical effects can be achieved:

[0150] By using an asynchronous frame scheduling mechanism, size state changes are only merged and processed once per frame, ensuring that the divider panel remains smooth under high-frequency interactions such as dragging, and greatly reducing the rendering pressure on the browser's main thread.

[0151] By managing the temporary and actual states in a controlled manner, data consistency and component maintainability are ensured, and state inconsistency issues caused by directly manipulating the DOM (Document Object Model) are avoided.

[0152] By integrating ResizeObserver's adaptive listener, we can achieve efficient adaptation to complex layouts and dynamic environments (including local changes in the parent container and window-level changes).

[0153] With its modular architecture design, it is easy to integrate with mainstream front-end frameworks such as React (a component-based front-end framework) and Vue (a progressive front-end framework). It supports multiple layout modes such as horizontal splitting, vertical splitting, and collapsing / expanding, and can be applied to various types of Web systems (Web refers to application systems based on the World Wide Web environment).

[0154] Although embodiments of the present invention have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting the present invention. Those skilled in the art can make changes, modifications, substitutions and variations to the above embodiments within the scope of the present invention.

Claims

1. An adaptive partitioned surface layout method based on asynchronous frame scheduling, characterized in that: Includes the following steps: (1) Render at least two panel areas separated by a separator line in the target page, bind drag event listeners to the separator line and set the initial size of each panel; register size change listeners for the parent container and / or browser window of the separator panel so that adaptive adjustment can be triggered when the size of the parent container and / or browser window changes. (2) When a user triggers a press event at the dividing line, record the initial position of the pointer and the initial size of each target panel, and switch the dividing panel component to drag state; (3) During the dragging process, the pointer displacement is calculated based on the pointer movement event, and the temporary size of the target panel is obtained accordingly. The temporary size is written into the temporary size state to reflect the size change during the dragging process. (4) When the temporary size state is detected to have changed, the actual size state driving the rendering is not updated immediately. Instead, a size update callback is registered through an asynchronous frame scheduling mechanism. The callback is triggered when the browser drawing frame arrives. The aforementioned temporary size changes are merged within a single drawing frame, and the actual size state is updated only once with the latest temporary size. (5) Based on the actual size status updated in step (4), calculate the width and / or height style of each panel, apply the actual size to the panel and the separator line, and trigger the re-rendering of the separator panel area to present a smooth size adjustment effect; (6) When the drag end event is detected at the separator line, the pointer event listener related to the drag is released, and the current actual size state is retained as the final layout result of this drag; when the size of the parent container of the separator panel is detected to change, the actual size of each panel is recalculated according to the preset size constraint rules and the layout update is triggered, so that the separator panel maintains the expected layout ratio and available space distribution in the scenario of the parent container size change.

2. The method according to claim 1, characterized in that: The temporary size state and the actual size state constitute a dual-state controlled data model for the size of the partition panel. The temporary size state is used to record the target size changes caused by pointer movement during dragging and to provide the latest candidate values ​​for batch updates in the next drawing frame. The actual size state is only updated in batches during asynchronous frame scheduling callbacks and is used to drive layout calculations and interface rendering to ensure a single data source for the size of the partition panel and consistency between the internal state of the component and the interface display.

3. The method according to claim 1, characterized in that: The asynchronous frame scheduling mechanism includes: registering a size synchronization callback by calling the browser-provided animation frame scheduling interface each time the temporary size state changes; canceling the previously unexecuted size synchronization callback and retaining only the latest registered size synchronization callback when the temporary size state changes again within the same rendering frame cycle; reading the latest temporary size state, writing it into the actual size state, and triggering layout calculation and rendering updates when the size synchronization callback is executed; the animation frame scheduling interface is the browser-provided animation frame scheduling interface that is synchronized with the drawing frame.

4. The method according to claim 1, characterized in that: The implementation adopts a component-based controlled design, including: storing the temporary size state and the actual size state through the state management unit inside the component, restricting changes to the panel size to be made only through the update interface provided by the state management unit, and not allowing direct modification of the panel DOM size and style from the outside; when the actual size state in the state management unit is updated, the front-end rendering framework uniformly drives the synchronous update of the virtual DOM or equivalent rendering tree and the real DOM, thereby avoiding the problem of inconsistency between the state and the interface caused by direct manipulation of the DOM.

5. The method according to claim 1, characterized in that: The parent container size change monitoring is implemented through the native size observation mechanism, including: registering the DOM node corresponding to the parent container of the separator panel by calling the size observation interface provided by the browser; when the width and / or height of the parent container changes in the callback of the size observation interface, calculating the new actual size state according to the ratio of the changed container size to the current size of each panel, and writing the new actual size state into the state management unit to trigger the layout update.

6. The method according to claim 1, characterized in that: The adaptive adjustment under changes in the size of the parent container includes at least one or more of the following rules: maintaining the relative proportion of each panel in the parent container and linearly scaling the size of each panel according to the new size of the parent container; for panels with minimum or maximum size constraints, prioritizing the size range of the constrained panels during scaling, and then compensating for the remaining panels; when the size of the parent container shrinks to below a threshold, automatically folding the preset lower priority panels and setting their size to zero or the preset minimum value to reserve more space for high priority panels.

7. The method according to claim 1, characterized in that: The layout calculation and rendering include: using CSS layout methods based on flexible layout and / or grid layout to convert the actual size state into the flexible base size, width and / or height style properties of the panel to adapt to the allocation of the remaining space of the parent container; providing panel collapse and expansion functions, updating the actual size state of the target panel to zero or the preset collapse size when collapsing, and restoring the actual size state to the size recorded before collapse or the preset default size when expanding, and merging high-frequency state changes in the collapse and expansion operations through the asynchronous frame scheduling mechanism.

8. The method according to claim 1, characterized in that: It supports two layout modes: horizontal and vertical dividers. Horizontal dividers are adjusted primarily by width, with left and right space allocation achieved by updating the width or flexible base size of each panel. Vertical dividers are adjusted primarily by height, with top and bottom space allocation achieved by updating the height or flexible base size of each panel. For nested layouts that contain both horizontal and vertical dividers, size listeners and state management are registered independently on each parent container.

9. The method according to claim 3, characterized in that: In addition to the animation frame scheduling interface, the asynchronous frame scheduling mechanism can also employ at least one of the following alternative or supplementary schemes to merge and throttle size state changes caused by high-frequency drag events: throttling based on timestamps or scheduling based on timers, where an actual size update is submitted only when the time interval since the last actual size update exceeds a preset threshold when a pointer movement event is triggered; throttling or debouncing operators based on reactive programming libraries, where drag events are streamed and throttling, debouncing, or auditing operators are used to control the size update frequency; and an internal task queue and a custom scheduler, where multiple size change requests during the drag process are added to a queue, and a unified scheduler processes the size updates in the queue in batches when adapting to the browser rendering rhythm.

Images