Page layout method, system, and storage medium

Abstract

The present specification provides a page layout method, system and storage medium, comprising: in response to a user's drag operation on a target component in an arbitrary state page, obtaining a new size of the target component, wherein the target component is any component in the arbitrary state page, and at least one influence chain affected by the size change of the target component is determined in the drag direction of the drag operation, wherein the at least one influence chain comprises line segment representation information abstracted based on the current size of the at least one influence chain, and the current size of the at least one influence chain is adjusted according to the new size to obtain a target page. By converting the component layout of a two-dimensional plane into line segment representation information of a one-dimensional line segment layout, the process of layout adjustment is simplified, the complexity of the page layout algorithm is reduced, and the linkage layout of elements in the influence chain can also be realized.

Description

TECHNICAL FIELD

[0001] The present specification relates to the technical field of page processing, and in particular, to a page layout method, system and storage medium. BACKGROUND

[0002] In modern web design and application development, page layout is a crucial step. With the popularity of the Internet and mobile devices, users have increasingly high expectations for the interface aesthetics, ease of use and response speed of web pages and applications. Therefore, developing high-quality page layouts has become one of the key factors in improving user experience.

[0003] In related technologies, common page layouts include elastic layout and free layout. In elastic layout, page content needs to determine positions according to layout rules, and cannot be freely placed based on user needs. In free layout, compared with elastic layout, although content pages can be freely placed, changes between components cannot be associated.

[0004] It should be noted that the above related technologies are only information known by the inventors personally, and do not represent that the above information has entered the public domain before the filing date of the present specification, nor does it represent that it can be prior art of the present specification. SUMMARY

[0005] The present specification provides a page layout method, system and storage medium to avoid at least one of the above technical problems.

[0006] In a first aspect, the present specification provides a page layout method applied to an arbitrary state page, wherein the arbitrary state page includes a plurality of components, each component has a corresponding current size, and the method comprises:

[0007] obtaining a new size of a target component in response to a user's drag operation on the target component, wherein the target component is any component in the arbitrary state page;

[0008] determining at least one influence chain affected by the size change of the target component in the drag direction of the drag operation, wherein the at least one influence chain includes line segment representation information abstracted based on the current size of the at least one influence chain; and

[0009] adjusting the current size of the at least one influence chain according to the new size to obtain a target page.

[0010] In a second aspect, the present specification provides a page layout system, comprising:

[0011] at least one storage medium storing at least one instruction set for page layout;

[0012] at least one processor communicatively connected with the at least one storage medium, wherein the at least one processor reads the at least one instruction set when the at least one processor is running, and performs the method according to the first aspect according to the indication of the at least one instruction set.

[0013] In a third aspect, the present specification provides a computer-readable non-transitory storage medium, wherein the computer-readable non-transitory storage medium stores at least one instruction set, and the at least one instruction set is executed by at least one processor to implement the method according to the first aspect.

[0014] From the above technical solutions, the page layout method, system and storage medium provided by the present specification determine an influence chain affected by the size change of the target component from an arbitrary state page according to the dragging direction, and the influence chain includes line segment representation information for converting the two-dimensional size layout of the two-dimensional plane into the one-dimensional size layout of the one-dimensional line segment. Since the influence chain includes the line segment representation information for converting the component layout of the two-dimensional plane into the one-dimensional line segment layout, it is helpful to simplify the layout adjustment process and reduce the complexity of the page layout algorithm. At the same time, it also reduces the difficulty of developing layout rules. On this basis, the page local system adjusts the current size of the influence chain according to the influence chain and the new size of the target component under the dragging, so as to realize the linkage layout of each element in the influence chain and obtain the target page.

[0015] Other functions of the page layout method, system and storage medium provided by the present specification will be partially listed in the following description. The creative aspects of the page layout method, system and storage medium provided by the present specification can be fully explained by practicing or using the methods, devices and combinations described in the following detailed examples. BRIEF DESCRIPTION OF DRAWINGS

[0016] In order to more clearly illustrate the technical solutions in the embodiments of the present specification, the following will briefly introduce the drawings needed to be used in the embodiment description. Obviously, the drawings in the following description are only some embodiments of the present specification, and other drawings can also be obtained by those skilled in the art without creative labor.

[0017] Figure 1 The schematic diagram of the elastic local provided by an embodiment of the present specification;

[0018] Figure 2 The schematic diagram of the free layout provided by an embodiment of the present specification;

[0019] Figure 3 The schematic diagram of the free layout provided by another embodiment of the present specification;

[0020] Figure 4A diagram of free layout provided for another embodiment of the present specification;

[0021] Figure 5 A diagram of coordinate system provided for an embodiment of the present specification;

[0022] Figure 6 A diagram of elastic partial provided for another embodiment of the present specification;

[0023] Figure 7 A diagram of free layout provided for another embodiment of the present specification;

[0024] Figure 8 A diagram of free layout provided for another embodiment of the present specification;

[0025] Figure 9 A diagram of layout rule provided for an embodiment of the present specification;

[0026] Figure 10 A diagram of application scenario of page layout method provided for an embodiment of the present specification;

[0027] Figure 11 A diagram of structure of page layout system provided for an embodiment of the present specification;

[0028] Figure 12 A diagram of flow of page layout method provided for an embodiment of the present specification;

[0029] Figure 13 A diagram of page provided for an embodiment of the present specification;

[0030] Figure 14 A diagram of line segment representation information provided for an embodiment of the present specification;

[0031] Figure 15 A diagram of principle of block segmentation provided for an embodiment of the present specification;

[0032] Figure 16 A diagram of page provided for an embodiment of the present specification;

[0033] Figure 17 A diagram of page provided for an embodiment of the present specification. DETAILED DESCRIPTION

[0034] The exemplary embodiments will be described in detail herein with reference to the attached drawings. In the following description, like reference numerals refer to like elements throughout the description. The following exemplary embodiments are described in the context of implementations described herein. They are not representative of all implementations consistent with the present specification. Rather, they are merely examples of apparatuses and methods consistent with some aspects of the present specification as detailed in the appended claims.

[0035] It should be understood that the terms "comprises" and "comprising", and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of components does not necessarily comprise only those components in the list, but can include additional components not expressly listed or inherent to such process, method, article, or apparatus.

[0036] The term "and / or", in the context of the present specification, is to be taken as specific- ally set forth in the above description. For example, "A and / or B" is to be interpreted as meaning "A and B", "A or B", or "A and B".

[0037] The term "a plurality of", in the context of the present specification, is to be taken as specifically set forth in the above description. For example, "a plurality of A" is to be interpreted as meaning "two or more A".

[0038] The terms "first", "second", "third", and the like, in the context of the present specification, are used to distinguish similar or like entities, and do not necessarily imply a specific order or sequence unless otherwise indicated. It should be understood that such terms are used interchangeably where appropriate, and that the order of those entities can be changed unless otherwise indicated.

[0039] The term "unit / module", as used in the present specification, refers to any known or later- developed hardware, software, firmware, artificial intelligence, fuzzy logic, or a combination of hardware and / or software code capable of performing the functions associated with that element.

[0040] For the convenience of the reader, at least some of the terms used in the present specification are explained below:

[0041] Layout, a typesetting process. In the field of Web, it is commonly understood as "Cascading Style Sheets (CSS) layout". It is used to determine the size, position, etc. of various content items (or elements) within a page. In the field of low-code building, there are two mainstream layout systems: flexible layout (also known as flow layout) and free layout.

[0042] In the elastic layout, as shown in Figure 1 the page content needs to flow in a specified direction according to the CSS Flex rule and cannot be freely placed.

[0043] In the free layout, based on the CSS absolute positioning, as shown in Figure 2 the page content can be freely placed and sized like a slide (Microsoft Office PowerPoint, PPT). That is, in the free layout, the layout effect is mainly determined by the size and coordinates, and the user can freely place the content to achieve the layout effect according to the needs.

[0044] It is worth noting that the free layout is mainly realized based on the CSS absolute positioning. This means that the page content cannot be automatically adjusted according to the situation (such as the page width, component size, etc.). As shown in Figure 3 no matter how the width of the first component changes, the position of the second component remains unchanged.

[0045] Linkage means that under the free layout, the page content can automatically adjust its size and position according to the situation. Just like the elastic layout, it can automatically adjust the layout structure according to certain rules. As shown in Figure 4 no matter how the width of the first component changes, the second component is always right.

[0046] Coordinate system, used to represent the position of any element in the page in a two-dimensional plane. In the coordinate system used in web technology, as shown in Figure 5 the upper left corner of the element is usually taken as the origin, the horizontal offset is called the horizontal coordinate (x), and the negative value indicates the left side of the origin, and the positive value indicates the right side of the origin. The vertical coordinate (y) specifies the vertical offset, and the negative value indicates above the origin, and the positive value indicates below the origin.

[0047] For the convenience of the reader to understand the present specification, the application scenario of the present specification will be introduced.

[0048] The technical solutions provided by the present specification are applicable to the scenario of needing to rearrange the layout of the page when the user performs a drag operation on a component in the page. The application scenario can be a scenario of needing to change the layout according to the screen size of the electronic device; or a scenario of adjusting the layout according to the direction (portrait or landscape) of the electronic device; or a scenario of rearranging the positions of elements when the electronic device is rotated; or a scenario of displaying different images or other visual elements according to different resolution screens; or a scenario of adjusting the layout according to the characteristics of the electronic device or the browser, and the like, which will not be listed one by one here.

[0049] In actual application, under the elastic layout, once the rules of the "button" component are set, as shown in Figure 6The "button" component is shown to the right of the rule. Then, no matter how the width of the background container (or called background component) changes, the "button" component is always to the right, without the need for manual adjustment.

[0050] Under free layout, the size change of the background container (such as the increase in width) does not affect the position of the "button" component. In actual scenarios, such as Figure 7 As shown, the "button" component may be attached to the lower right corner of the background container, which results in the need to manually drag the "button" component to a new position after increasing the width of the background container to ensure that the layout effect meets the user's expectations.

[0051] Among them, in the scenario of free layout, there is usually a scenario of multiple layers of component nesting. As shown, Figure 8 The second component is nested in the first component, the third component is nested in the second component, and the fourth component and the "button" component are nested in the third component. In the case of adjusting the size of the fourth component, it may be necessary to adjust the size of all its parent components (i.e. the first component, the second component, and the third component), that is, the secondary editing cost is high.

[0052] Based on the above analysis, in the case of elastic layout, the components automatically adjust the layout according to the CSS Flex rule, and the secondary editing cost is low. However, users need to master the CSS Flex rule, and the understanding cost is high. Under free layout, the user learning cost is low, and it can be freely dragged and placed like PPT, with low use cost. However, since free layout is completely based on CSS absolute positioning, the user's secondary editing cost is high.

[0053] In some embodiments, the page layout problem, especially the complex page layout problem, can be handled based on the constraint solving algorithm (Cassowary). Among them, the Cassowary algorithm is an incremental constraint solving algorithm that can efficiently solve layout constraint problems. This algorithm allows the user interface to dynamically update the layout at runtime without the need to recalculate the entire layout. This makes it very suitable for responsive design and dynamically adjusted user interfaces.

[0054] The Cassowary algorithm is still based on CSS absolute positioning implementation, but it can rely on algorithm to calculate the position and size of all items (such as components) after the layout rule. In essence, it is a polynomial solver, and a layout can be described as a set of equations or inequalities.

[0055] As Figure 9As shown, the layout rules can include two rules. One rule is that the x-axis center of the mobile phone is equal to the x-axis center of the tablet computer; and the other rule is that the bottom side of the mobile phone is equal to the bottom side of the tablet computer. Thus, the two rules can determine that the bottom sides of the mobile phone and the tablet computer are aligned and horizontally centered. When the width of the tablet computer changes, the position of the tablet computer can be automatically affected, and vice versa. Using the Cassowary algorithm, the final values of each item under a set of rules can be calculated, and when a condition changes, the new sizes and coordinates of all items can be determined, and thus the linkage effect is naturally achieved.

[0056] However, although the Cassowary algorithm is theoretically complete and is a very powerful layout algorithm, its disadvantages are also obvious, such as complex rules, high learning cost, and the like.

[0057] In some other embodiments, a grid flow layout can also be used. The grid flow layout has the characteristics of having fixed cells, an element occupying a certain number of cells, and having an upward / leftward flow effect. There is a certain ability of free layout, and there is a linkage squeezing effect.

[0058] However, the layout rules of the grid flow layout are single and cannot be customized. The grid flow layout is suitable for vertical scene building (for example, forms, questionnaires, and layout-uniform scenes), and lacks practicality in the field of more extensive general page building.

[0059] It should be noted that the above related technical content is only the information known by the inventors personally, and does not mean that the above information has entered the public domain before the filing date of the specification, nor does it mean that it can be prior art of the specification.

[0060] In order to avoid at least one of the above problems, the present specification proposes a technical concept with creative labor: converting a two-dimensional size layout of an original page in a two-dimensional plane into a one-dimensional size layout of a one-dimensional line segment, to obtain a new page according to a drag operation and a line segment representation information layout of the converted one-dimensional line segment. In order to achieve the linkage effect of adaptive changes of corresponding components while the user freely drags the components, the page content can still be like PPT in the free layout.

[0061] For example, in the case where the user drags a target component in an arbitrary state page, the page layout system determines an influence chain affected by the size change of the target component from the arbitrary state page according to the dragging direction, and the influence chain includes line segment representation information of converting a two-dimensional size layout of a two-dimensional plane into a one-dimensional size layout of a one-dimensional line segment. On this basis, the page local system adjusts the current size of the influence chain according to the influence chain and the new size of the target component under the drag, to achieve the linkage layout of each element in the influence chain, and obtains a target page.

[0062] Based on the above analysis, the influence chain includes line segment representation information for converting the two-dimensional plane component layout into a one-dimensional line segment layout, which helps to simplify the layout adjustment process. Therefore, the complexity of the page layout algorithm can be reduced. At the same time, the difficulty of developing layout rules is also reduced. In addition, based on the line segment representation information, the linkage layout between the target component and the influence component can be realized, that is, the linkage layout adjustment of each element in the influence chain can be realized to maintain the consistency and aesthetics of the page layout.

[0063] Figure 10 The application scenario of the page layout method of the embodiments of the present specification is shown, wherein the page layout method of the present specification can be applied to the application scenario 100 as shown in Figure 10 Figure 10 The application scenario 100 can include a target user 101, a client 102, a server 103, and a network 104 as shown in

[0064] The target user 101 can be a user who initiates a drag operation on a target component in an arbitrary state page. For example, the target user 101 can perform a target operation on the client 102 to trigger the drag operation.

[0065] The client 102 can be an electronic device that provides an interaction function to the target user 101. For example, the client 102 can provide an interaction interface to the target user 101, and the target user 101 can perform an interaction operation in the interaction page. In some embodiments, the client 102 performs the page layout method described in the present specification in response to detecting the drag operation triggered by the target user 101. At this time, the client 102 can store data or instructions for executing the page layout method described in the present specification, and can execute or be used to execute the data or instructions. In some embodiments, the client 102 can include a hardware device with data information processing function and necessary programs required to drive the hardware device to work, so as to execute the page layout method described in the present specification.

[0066] In some embodiments, the client 102 can include a mobile device, a tablet computer, a notebook computer, a built-in device of a motor vehicle, or the like, or any combination thereof. In some embodiments, the mobile device can include a smart home device, a smart mobile device, a virtual reality device, an augmented reality device, or the like, or any combination thereof. In some embodiments, the smart home device can include a smart television, a desktop computer, or the like, or any combination thereof. In some embodiments, the smart mobile device can include a smart phone, a personal digital assistant, a game device, a navigation device, or the like, or any combination thereof. In some embodiments, the built-in device in the motor vehicle can include a vehicle-mounted computer, a vehicle-mounted television, or the like.

[0067] ​In some embodiments, the client 102 can be installed with one or more applications (APPs). The APPs can provide the target user 101 with the ability to interact with the outside world through the network 104 and an interface. The APPs include, but are not limited to, web browser type APPs, search type APPs, chat type APPs, shopping type APPs, video type APPs, financial type APPs, instant messaging tools, email clients, social platform software, and the like. In some embodiments, the target APP can be installed on the client 102. The target APP can enable the client 102 to obtain the drag operation.

[0068] As shown in Figure 10 , the client 102 can be in communication connection with the server 103. The server 103 can be in communication connection with one client 102 or multiple clients 102. In some embodiments, the client 102 can interact with the server 103 through the network 104 to receive or send messages, etc. For example, the client 102 can interact with the server 103 through the network 104 to send the drag operation to the server 103.

[0069] The server 103 can be a server that provides various services. For example, the server 103 can be a cloud server or a local server. The server 103 can be in communication connection with one client 102 and receive data sent by the client 102, or in communication connection with multiple clients 102 and receive data sent by each client 102.

[0070] In some embodiments, the page layout method described in the present specification can be executed on the server 103. At this time, the server 103 can store data or instructions for executing the page layout method described in the present specification, and can execute or be used to execute the data or instructions. The server 103 can include a hardware device with data information processing function and necessary programs for driving the hardware device to work.

[0071] The network 104 is a medium for providing communication connection between the client 102 and the server 103. The network 104 can facilitate the exchange of information or data. As shown in Figure 10 , the client 102 and the server 103 can be connected with the network 104 respectively, and transmit information or data to each other through the network 104.

[0072] In some embodiments, network 104 can be any type of wired or wireless network, or a combination thereof. For example, network 104 may include a cable network, a wired network, a fiber optic network, a telecommunications network, an intranet, the Internet, a local area network (LAN), a wide area network (WAN), a wireless local area network (WLAN), a metropolitan area network (MAN), a public switched telephone network (PSTN), a Bluetooth network™, a ZigBee™ short-range wireless network, a near field communication (NFC) network, or a similar network.

[0073] In some embodiments, network 104 may include one or more network access points. For example, network 104 may include wired or wireless network access points, such as base stations or internet switching points, through which one or more components of client 102 and server 103 can connect to network 104 to exchange data or information.

[0074] It is worth noting that, Figure 10 The number of clients 102, servers 103, and networks 104 shown is merely illustrative. Depending on implementation needs, there can be any number of clients 102, servers 103, and networks 104. Furthermore, the page layout methods provided in this specification can be executed entirely on client 102, entirely on server 103, or partially on client 102 and partially on server 103.

[0075] In other words, Figure 10 and targeting Figure 10 The above description is only used to illustrate the possible application scenarios for the page layout method of this specification, and should not be construed as a limitation on the application scenarios.

[0076] Figure 11A hardware structure diagram of a page layout system 200 is shown, which is provided according to an embodiment of the present specification. The page layout system 200 can execute the page layout method described in the present specification. The page layout method is introduced in other parts of the present specification. When the page layout method is executed on the client 102, the page layout system 200 can be the client 102. When the page layout method is executed on the server 103, the page layout system 200 can be the server 103. When the page layout method is partially executed on the client 102 and partially executed on the server 103, the page layout system 200 can be a system including the client 102 and the server 103.

[0077] As shown in Figure 11 The page layout system 200 can include at least one storage medium 203 and at least one processor 202. In some embodiments, the page layout system 200 can further include a communication port 204 and an internal communication bus 201. The page layout system 200 can further include an I / O component 205.

[0078] The internal communication bus 201 can connect different system components. For example, the internal communication bus 201 can connect the storage medium 203, the processor 202, the communication port 204 and the I / O component 205.

[0079] The I / O component 205 supports input / output between the page layout system 200 and other components.

[0080] The communication port 204 is used for data communication between the page layout system 200 and the outside world, for example, the communication port 204 can be used for data communication between the page layout system 200 and the network 104. The communication port 204 can be a wired communication port or a wireless communication port.

[0081] The storage medium 203 can include a data storage device. The data storage device can be a non-transitory storage medium or a transitory storage medium. For example, the data storage device can include one or more of a disk 2031, a read-only memory (ROM) 2032 or a random access memory (RAM) 2033. The storage medium 203 further includes at least one instruction set stored in the data storage device. The instruction set includes computer program code, which can include programs, routines, objects, components, data structures, processes, modules, etc. that execute the page layout method provided by the present specification.

[0082] The at least one processor 202 can be communicatively connected with the at least one storage medium 203. The at least one processor 202 is configured to execute the at least one set of instructions described above. When the page layout system 200 is running, the at least one processor 202 reads the at least one set of instructions and performs the page layout method provided in the present specification according to the instructions of the at least one set of instructions. The processor 202 can perform all the steps included in the page layout method. The processor 202 can be in the form of one or more processors. In some embodiments, the processor 202 can include one or more hardware processors, such as a microcontroller, a microprocessor, a reduced instruction set computer (RISC), an application-specific integrated circuit (ASIC), an application-specific instruction set processor (ASIP), a central processing unit (CPU), a graphics processing unit (GPU), a physics processing unit (PPU), a microcontroller unit, a digital signal processor (DSP), a field programmable gate array (FPGA), an advanced RISC machine (ARM), a programmable logic device (PLD), any circuit or processor capable of executing one or more functions, or the like, or any combination thereof.

[0083] For the sake of illustration only, only one processor 202 is shown in the page layout system 200 in the accompanying drawings. However, it should be noted that the page layout system 200 can also include multiple processors in the present specification, and therefore, the operations and / or method steps disclosed in the present specification can be performed by one processor or jointly performed by multiple processors. For example, if the processor 202 of the page layout system 200 is described in the present specification to perform step A and step B, it should be understood that step A and step B can also be performed jointly or separately by two different processors 202 (e.g., a first processor performs step A and a second processor performs step B, or the first and second processors jointly perform steps A and B).

[0084] Referring to Figure 12 , Figure 12 A flowchart of a page layout method provided by an embodiment of the present specification is shown. The method is applied to an arbitrary state page, and the arbitrary state page includes a plurality of components, each component having a respective current size. As shown in Figure 12 , the method includes the following S1201 to S1203:

[0085] S1201: In response to a user's drag operation on a target component, obtaining a new size of the target component, wherein the target component is any component in the arbitrary state page.

[0086] The arbitrary state page can also be referred to as an initial page or an original page, which is a page that a user desires to resize. That is, the arbitrary state page refers to a page before resizing. The arbitrary state page includes two or more components. In a two-dimensional coordinate system in which the arbitrary state page is located, each component has corresponding coordinate information. For example, each component has a corresponding size, which is a size before resizing, and thus can be referred to as a current size.

[0087] To resize one or more components in the arbitrary state page, a user can perform a drag operation on a component (i.e., a target component) that the user desires to resize. The drag operation triggers the page layout system to perform a page layout method provided in the present specification, so as to achieve resizing of the current size of the arbitrary state page and obtain a target page that meets the user's desire.

[0088] The drag operation includes a position drag operation and / or a size adjustment operation. The position drag operation can be understood as a drag operation performed to adjust the position of the target component. The size adjustment operation can be understood as a drag operation performed to adjust the size of the target component.

[0089] The new size is the size of the target component that the user desires to adjust. That is, the user desires to adjust the current size of the target component to the new size through the drag operation. Accordingly, the page layout system can obtain the new size based on the drag operation of the user.

[0090] S1202: In a drag direction of the drag operation, at least one influence chain affected by a size change of the target component is determined, wherein the at least one influence chain includes line segment representation information abstracted based on a current size of the at least one influence chain.

[0091] The drag direction can be understood as a moving direction from the start to the end of the drag operation. The page layout system can detect the drag operation and obtain the drag direction according to the entire drag process of the drag operation.

[0092] In the drag direction, the page layout system can determine which components in the arbitrary state page are affected by the size change of the target component. Accordingly, the page layout system can determine one or more influence chains according to the components affected by the size change of the target component. That is, the influence chain includes the target component and a series of components (which can be referred to as affected components) affected by the size change of the target component.

[0093] The page layout system can abstract the influence based on the current size of the influence chain to abstract the influence chain into a one-dimensional line segment. That is, the page layout system can represent the influence chain through line segment representation information.

[0094] For example,Figure 13 As shown, the influence chain includes four components: component C, component F, component G, and component M. Component C is the parent component (also called the parent container or parent node). Components F, G, and M are the three child components (also called child containers or child nodes) of component C.

[0095] Page layout systems can, for example, Figure 13 The dimensional changes of the two-dimensional plane shown are abstracted as follows: Figure 14 The length variation of a one-dimensional continuous line segment is shown (i.e., the information represented by the line segment). For example... Figure 14 As shown, "Node Width" refers to the width of the component; "Spacing" refers to the width of the distance between components.

[0096] In some embodiments, S1202 may include the following steps one and two:

[0097] Step 1: Divide any state page into multiple blocks and determine the target block where the target component is located.

[0098] For example, such as Figure 15 As shown, any state page includes component 1, component 2, component 3, and component 4, with component 1 as the target component. The page layout system can divide any state page into several blocks and find the block containing component 1 within those blocks.

[0099] For example, a page layout system can use spatial hashing to divide a page in any state into several blocks of preset size. Correspondingly, the page layout system can determine the block where component 1 is located within those blocks. For example... Figure 15 As shown, component 1 is located in 9 blocks. All 9 blocks are target blocks. Additionally, in Figure 15 In the expression (0,1):1, (0,1) represents coordinates; and (0,1):1 indicates that the number of components belonging to that region is 1. The meanings of other expressions are similar and will not be listed here.

[0100] Step 2: Determine at least one influence chain based on the drag direction and the target block.

[0101] Once the target block is determined, the page layout system can use the target block as a reference and determine at least one influence chain based on the drag direction.

[0102] Based on the above analysis of steps one and two, it can be seen that in this embodiment, the page layout system determines the target block where the target component is located through block segmentation, and on this basis, determines at least one influence chain in conjunction with the drag direction. This allows for efficient calculation of the influence chain that the target block may influence in the drag direction.

[0103] In some embodiments, step two can comprise the following sub-step one and sub-step two:

[0104] Sub-step one: traversing other components in the drag direction of the target component in the arbitrary state page to obtain an affected component at least partially overlapped with the projection of the target component.

[0105] Wherein, the other components refer to components in the arbitrary state page other than the target component.

[0106] For example, in combination with Figure 15 It can be seen that the drag direction is right (the drag direction in the present specification is based on the browsing perspective when browsing the diagram). The page layout system traverses the components on the right side of the target component to determine the components (i.e. affected components) that can be affected by the size change of the target component when the user drags the target component to the right.

[0107] Specifically, when traversing, if a certain block is occupied by a certain component, the page layout system calculates whether the projection of component 1 will cross (e.g. at least partially overlap) the component. If yes, it means that the component will be affected by the size change of the target component, and the component is an affected component. If no, it means that the component will not be affected by the size change of the target component, and the component is not an affected component.

[0108] For example, in combination with Figure 15 It can be seen that when the width of component 1 grows to the right, it will first hit component 2, and then hit component 3, but will not hit component 4. Therefore, component 2 and component 3 are affected components.

[0109] In some embodiments, the page layout system can use the nearest neighbor search based on spatial hashing in combination with interval trees for occlusion culling to quickly calculate the affected components. In the present embodiment, the page layout system combines spatial hashing and interval trees, which can improve the efficiency of determining affected components.

[0110] Sub-step two: constructing the at least one influence chain according to the affected components, and determining the line segment representation information according to the current size of the at least one influence chain.

[0111] Correspondingly, after determining the affected components, the page layout system can construct an influence chain comprising the target component and the affected components. In addition, according to the current size of the target component and the affected components, the page layout system can determine the line segment representation information as shown in Figure 14 .

[0112] In the present embodiment, the page layout system determines the affected components first, and then constructs the influence chain and the corresponding line segment representation information based on the affected components. This can achieve fast and accurate determination of the influence chain and the line segment representation information.

[0113] It is worth noting that in some embodiments, the size of the at least one influence chain can be a fixed size. Accordingly, the page layout system can update the at least one influence chain according to the opposite direction of the dragging direction.

[0114] For example, as shown in Figure 15 If the target component is component 2 and the dragging direction is left, the influence chain is component 2 - the distance between component 2 and component 1 - component 1 - the distance between component 1 and component 5. If the size of the influence chain is not adjustable, that is, the influence chain is a fixed size. For example, component 1, component 2, the distance between component 2 and component 1, and the distance between component 1 and component 5 are all fixed sizes. In this case, the page layout system can determine a new influence chain to the right and update the influence chain obtained to the left based on the new influence chain. That is, the new influence chain is used as the at least one influence chain, and subsequent operations are performed.

[0115] That is, in this embodiment, since the size of the arbitrary state page cannot be adjusted in the dragging direction, the page layout system can adjust the size of the arbitrary state page from the opposite direction of the dragging direction. The effective performance of the page layout can be achieved, and the user's page adjustment requirements can be met.

[0116] S1203: Adjust the current size of the at least one influence chain according to the new size to obtain a target page.

[0117] For example, the page layout system can adjust the size of the influence chain according to the new size. For example, the sizes of the target component and the influence component in the influence chain are adjusted to finally generate a new page (i.e., the target page) including the adjusted sizes.

[0118] As can be seen from the above analysis of S1201 to S1203, the page layout system can simplify the calculation process by converting the two-dimensional layout into a one-dimensional line segment representation, thereby improving the system performance. Moreover, the demand for computing resources is reduced, which is particularly important when dealing with complex layouts. In addition, the page layout system can determine the influence chain according to the dragging direction, so it can easily adapt to various different layouts and component configurations. This flexibility makes the technology easy to extend to new application scenarios and different layout types.

[0119] In some embodiments, the page layout method can further include obtaining target configuration information of the target component, wherein the target configuration information is used to represent constraint information on the size adjustment of the at least one influence chain. Accordingly, S1203 can include: based on the target configuration information, constraining the operation of adjusting the current size of the at least one influence chain according to the new size to obtain a target page.

[0120] For example, to ensure that the page layout is both in line with the user's expectation and maintains integrity, the page layout system pre-sets configuration information of each component for constraining the adjustment of the page size. The configuration information can be determined by the page layout system based on user demand, history, experiment, and interaction between the page layout system and the user, which is not limited in the embodiment.

[0121] Each component has corresponding configuration information, which is used to guide how to adjust the layout when the size changes. When the user performs a drag operation on a specific component (e.g., a target component), the page layout system obtains the configuration information (e.g., target configuration information) of the component.

[0122] The target configuration information contains information about how to adjust the target component and its impact chain. During the size adjustment process, the page layout system constrains the behavior of size adjustment according to the target configuration information to ensure the effectiveness and reliability of the adjustment.

[0123] When the user drags the target component, the page layout system can adjust the size of the target component and the impact component according to the new size and the target configuration information. During the adjustment process, the page layout system can use line segment representation information to simplify the calculation process to ensure the accuracy and efficiency of the page size adjustment.

[0124] In this way, the page layout system can achieve layout adjustment that is both in line with the user's expectation and maintains integrity, while improving the effectiveness and reliability of the size adjustment.

[0125] As can be seen from the above analysis, the impact chain includes different elements, such as the target component and other elements affected by the size change of the target component. The other elements include impact components affected by the size change of the target component, and the impact distance between components in the at least one impact chain.

[0126] In some embodiments, the configuration information of a component can represent constraints in two dimensions. One dimension is the size constraint of the component itself; the other dimension is the size constraint of other elements in the impact chain other than the target component.

[0127] For example, the target configuration information includes self-constraint information and allocation constraint information, wherein the self-constraint information is used to constrain the size adjustment of the target component, and the allocation constraint information is used to constrain the size adjustment of other elements in the at least one impact chain. The elements in the at least one impact chain include the target component and the other elements.

[0128] For example, the size variation range of each component is limited, which is the constraint on the size variation of the component itself. For example, whether the component is scalable, and if so, what is the maximum and minimum value of the scalability. Specifically, the minimum size of a component is 0, and the maximum size is infinite, which can be represented by the size variation range of (0, Infinity) to represent the constraint on the size variation of the component itself.

[0129] The allocation constraint information can be understood as the balancing logic of the size variation of the elements in the influence chain. For example, when the size of a component in the influence chain changes, the logic that maintains the overall size variation balance of the influence chain can be maintained. To avoid the size variation imbalance of the elements in the influence chain, the visual effect is poor.

[0130] Specifically, continuing to refer to Figure 13 and Figure 14 It can be seen that if the target component is component F, the self-constraint information can be understood as a constraint on the width of component F. The allocation constraint information can include: when the size of component F is adjusted, the size adjustment of components G, M, gap G_M, gap C_F, etc.

[0131] That is, in this embodiment, the page layout system can constrain the size adjustment from two dimensions. Both the size adjustment constraint of the target component itself and the size adjustment constraint of other elements in the influence chain are considered. The effectiveness, reliability and integrity of the size adjustment can be further improved.

[0132] In some embodiments, the allocation constraint information is determined based on the line segment representation information and satisfies the size balancing information constructed based on the line segment representation information. The size balancing information represents that the total length of the at least one influence chain is equal to the sum of the sizes of each component in the at least one influence chain and the size of the influence gap.

[0133] For example, as can be seen from the above example, the allocation constraint information is determined based on the line segment representation information as shown in Figure 14 For example, the page layout system can construct the size balancing information corresponding to the line segment representation information. The allocation constraint information can be determined based on the size balancing information.

[0134] The size balancing information can be a size balancing formula. The size balancing formula is used to represent the overall balancing principle of the change of each component as shown in Figure 13

[0135] For example, as can be seen from Figure 14 The page layout system can construct the size balancing formula: F+G+M+C_F+F_G+G_M+M_C=C. No matter which side of the equation changes, the side must be balanced.​

[0136] For example, if the width of component F and component M is unchangeable; the width of component C and component G is changeable; the spacing between components is unchangeable. When the width of component G increases, the width of all items on the left side of the size balancing formula does not change, and component C naturally increases until the size balancing formula is balanced on both sides. When the width of component C decreases, the width of an item on the left side of the size balancing formula must decrease, and specifically the width of component G decreases, until the size balancing formula is balanced on both sides.

[0137] In some embodiments, the allocation constraint information can also include a balancing strategy for maintaining the balance of the size balancing formula. For example, average allocation, from left to right, from right to left, allocation priority corresponding to components, etc.

[0138] In this embodiment, by combining the size balancing information to determine the allocation constraint information, the length change of the at least one influence chain can be kept balanced. Thus, the reasonableness, aesthetics and consistency of the page layout can be ensured. In turn, the effectiveness and reliability of the size adjustment can be improved.

[0139] In some embodiments, in the case where the layout system constrains the size adjustment from two dimensions, the above-mentioned "constraining, according to the target configuration information, the operation of the current size of the at least one influence chain according to the new size adjustment, to obtain a target page" can include the following steps 1 and 2:

[0140] Step 1: determining the target size of the target component in the target page according to the self-constraint information and the new size.

[0141] In combination with the above analysis, the new size is the size of the target component after the user expects adjustment. The self-constraint information refers to specific rules or conditions that the target component needs to follow when the size changes. For example, minimum size, maximum size, spacing requirements with other components, etc. These constraint information is used to ensure that the target component still maintains a reasonable layout and appearance after the size changes. For example, due to the size constraints of the target component, its size cannot be negative, and its size cannot be too large (i.e., not exceeding the preset maximum size), etc.

[0142] Therefore, the page layout system can determine the size of the target component that may be in the target page (i.e., the target size) based on the self-constraint information and the new size. That is, the target size needs to meet both the user's needs and the constraint conditions of the layout.

[0143] For example, if the self-constraint information indicates that the size of the target component is not adjustable, the target size is the current size of the target component.

[0144] For another example, if the target component is, for example, Figure 14Component C in the component C. The self-constraint information of Component C represents that the size of Component C is adjustable, and the self-constraint information includes an adjustable size interval [Cmin, Cmax]. If the new size is greater than or equal to the current size, it is further determined the size between Cmax and the new size. If Cmax is greater than or equal to the new size, the target size is the new size; if Cmax is less than the new size, the target size is Cmax. Conversely, if the new size is less than the current size, it is further determined the size between Cmin and the new size. If Cmin is greater than or equal to the new size, the target size is Cmin; if Cmin is less than the new size, the target size is the new size.

[0145] Step 2: According to the target size and the allocation constraint information, the operation of adjusting the current size of the at least one influence chain is constrained to obtain a target page.

[0146] In combination with the above example, the allocation constraint information refers to rules or conditions that other elements in the at least one influence chain need to follow in the adjustment process to ensure that the adjusted layout meets certain requirements, such as maintaining the spacing between components, meeting the minimum / maximum size limit, etc.

[0147] Correspondingly, the page layout system adjusts the current size of the influence chain according to the adjustable size (i.e., the target size) and the adjustment constraint of the influence chain (i.e., the allocation constraint information) to obtain a target page including the adjusted size of the influence chain.

[0148] In combination with the analysis of the above step 1 and step 2, in this embodiment, the page layout system first determines the target size based on the self-constraint information, and then adjusts the size of the influence chain based on the target size and the allocation constraint information to obtain the target page. This can make the target page meet the size change constraint of the target component itself, meet the size change constraint of other elements in the influence chain, and also meet the user's layout demand. Therefore, the effectiveness and reliability of the page layout can be improved.

[0149] In some embodiments, step 2 can include the following substeps 1 and 2:

[0150] Substep 1: Determine the initial size change between the target size and the current size of the target component.

[0151] For example, the initial size change can be understood as the size increase or contraction of the influence chain in the dragging direction. That is, the size change of the target component or the influence chain. That is, the initial size change is the length change of the influence chain.

[0152] Wherein, the initial size change can be calculated by DIFF = N limted -O represents. Wherein, DIFF is the initial size change, N limtedTarget size, for the current size of the O target component.

[0153] Sub-step 2: adjusting the current size of the at least one impact chain according to the allocation constraint information and the initial size change amount, to obtain a target page.

[0154] Correspondingly, in the case of obtaining the size change amount of the impact chain (i.e. the initial size change amount), the page layout system can adjust the current size of the impact chain based on the allocation constraint information that constrains the size change of the impact chain. The size adjustment can be made to satisfy the constraints of the layout as much as possible under the condition of satisfying the possible size change amount.

[0155] In some embodiments, sub-step 2 can include the following refinement step 1 and refinement step 2:

[0156] Refinement step 1: distributing the initial size change amount to the elements according to the allocation constraint information, to obtain the expected size of the at least one impact chain.

[0157] For example, the page layout system can include a distributor. The distributor is used to perform the distribution of the initial size change amount to the at least one impact chain to adjust the size of the at least one impact chain. Wherein the distribution includes trial distribution and formal distribution. That is, before formally adjusting the size of the at least one impact chain, the distributor can first perform trial adjustment. For example, the distributor attempts to distribute the changeable size to the impact component and / or the impact spacing based on the allocation constraint information, to obtain the size of the at least one impact chain after trial distribution (i.e. the expected size).

[0158] It can be understood that in the trial distribution stage, if the initial size change amount can be distributed to the at least one impact chain, i.e. the at least one impact chain can "eat up" the initial size change amount under the constraint of the allocation constraint information, then the expected size of the at least one impact chain is the current size of the at least one impact chain plus the initial size change amount.

[0159] On the contrary, if the at least one impact chain cannot "eat up" the initial size change amount under the constraint of the allocation constraint information, then the expected size of the at least one impact chain is the current size of the at least one impact chain plus the size change amount that it can "eat up". In this case, the distributor can feedback the size that the at least one impact chain cannot "eat up".

[0160] Refinement step 2: adjusting the current size of the at least one impact chain according to the expected size and the allocation constraint information, to obtain a target page.

[0161] In combination with the above analysis, the expected size can be understood as the size of the at least one impact chain after the possible initial size change is "eaten up" by the adapter in the trial allocation stage. On this basis, the allocator performs formal allocation based on the expected size and allocation constraint information to obtain the size-adjusted impact chain.

[0162] In combination with the analysis of the refinement step 1 and the refinement step 2, the allocator adjusts the current size of the at least one impact chain in two stages of trial allocation and formal allocation, which can improve the accuracy and reliability of size adjustment.

[0163] In some embodiments, the at least one impact chain is a plurality of impact chains. The refinement step 2 can include determining a target expected size that satisfies the size change of the plurality of impact chains from each expected size according to the initial size change, and adjusting the current size of the plurality of impact chains according to the target expected size and the allocation constraint information to obtain a target page.

[0164] For example, in the case of multiple impact chains, the expected sizes of different impact chains can be different. In order to satisfy the adjustment of each impact chain, it is necessary to avoid adjusting only part of the plurality of impact chains. That is, in order to satisfy the comprehensiveness and effectiveness of size adjustment, the allocator can obtain an expected size (i.e., a target expected size) that satisfies the size adjustment of each impact chain in the plurality of impact chains from each expected size of the plurality of impact chains. The allocator adjusts the current size of each impact chain in the plurality of impact chains on the basis of the allocation constraint information to obtain a target page.

[0165] In this embodiment, since the size adjustment is determined based on the target expected size, and the target expected size can satisfy the size adjustment of each impact chain in the plurality of impact chains. Therefore, the effectiveness and reliability of size adjustment can be achieved.

[0166] The size adjustment can be an increase in size or a decrease in size. Therefore, in some embodiments, the allocator can first determine the size relationship between the initial size change and 0. If the initial size change is greater than 0, i.e., the initial size change is a positive number, the size adjustment is an increase in size, and the allocator obtains the minimum expected size from the expected sizes as the target expected size.

[0167] In this case, if the allocator can satisfy the size adjustment under the minimum expected size, it is likely to satisfy the size adjustment under other expected sizes. So that the size adjustment can satisfy each impact chain in the plurality of impact chains. Thus, the comprehensiveness and reliability of size adjustment can be improved.

[0168] Conversely, if the initial size change amount is less than 0, i.e. the initial size change amount is negative, the size adjustment is a size reduction, and the distributor obtains the maximum expected size from the expected sizes as the target expected size.

[0169] Similarly, in this case, if the distributor can satisfy the size adjustment under the maximum expected size, it is likely that the size adjustment under other expected sizes can also be satisfied. So that the size adjustment can satisfy each of the plurality of influence chains. Thus, the comprehensiveness and reliability of the size adjustment can be improved.

[0170] It is worth noting that in other embodiments, the at least one influence chain can also be one influence chain. In the case where the at least one influence chain is one influence chain, the distributor can take the expected size of the influence chain as the target expected size.

[0171] In some embodiments, "adjusting the current sizes of the plurality of influence chains according to the target expected size and the allocation constraint information to obtain a target page" can include the following first step and second step:

[0172] First step: determining the difference between the target expected size and the current size of the target component as a target size change amount.

[0173] In combination with the above example, the target expected size is the changed influence chain size that satisfies the size change of each influence chain. Therefore, the target size change amount can be understood as the change amount that satisfies the size change of each influence chain.

[0174] wherein, wherein the target size change amount can be obtained by DIFF ’ = N Consult -O represents. Wherein, DIFF ’ is the target size change amount, N Consult is the target expected size, and O is the current size of the target component.

[0175] Second step: distributing the target size change amount to the plurality of influence chains according to the allocation constraint information to adjust the current sizes of the plurality of influence chains to obtain a target page.

[0176] Correspondingly, in the case where the distributor has calculated the target size change amount, the distributor can formally distribute the target size change amount to the plurality of influence chains based on the allocation constraint information to obtain a target page.

[0177] Based on the analysis of steps 1 and 2 above, it can be seen that in this embodiment, the allocator determines the adjustable amount (i.e., the target size change) that can satisfy the size adjustment of each influence chain, and adjusts the size of each influence chain based on the allocation constraint information. This ensures that the size adjustment meets the actual adjustable conditions of each influence chain, thereby improving the comprehensiveness and reliability of the size adjustment.

[0178] In some embodiments, any state page may also include a parallel chain that does not interfere with the at least one influencing chain. Accordingly, the page layout system can obtain the parallel chain and adjust its current size according to the configuration information of the parallel chain and the size adjustment operation of the at least one influencing chain to obtain the target page.

[0179] In this context, a parallel chain can be understood as a chain whose size adjustment does not interfere with the at least one influencing chain. For example, in a parallel chain, there are components that are not affected by changes in the size of the target component. However, considering the overall page layout, adaptive adjustments to the page content are necessary. Therefore, for any state of the page, other chains besides the at least one influencing chain also require adaptive adjustments. For an understanding of the configuration information for parallel chains, please refer to the example above; it will not be repeated here.

[0180] For example, such as Figure 15 As shown, the influence chain is: spacing between component 5 and component 1 - component 1 - spacing between component 1 and component 2 - component 2 - spacing between component 2 and component 3 - component 3 - spacing between component 3 and component 5. Any page state may include parallel chains: spacing between component 5 and component 4 - component 4 - spacing between component 4 and component 5. After adjusting the size of the influence chain, the page layout system adjusts the size of the parallel chains. This achieves overall page adjustment, thereby improving the comprehensiveness and accuracy of the page layout.

[0181] Based on the above analysis, the page layout method provided in this specification can be divided into two parts: one part is adjusting the current size of the influencing chain, and the other part is adjusting the current size of the parallel chain. As shown in the examples above, in some scenarios, only the influencing chain may be included; in other scenarios, both the influencing chain and the parallel chain may be included.

[0182] In some embodiments, adjusting the size of the influencing chain can be referred to as an "inner" adjustment; adjusting the size of the parallel chain can be referred to as an "outer" adjustment. Typically, a page layout system may first make "inner" adjustments and then "outer" adjustments.

[0183] It's worth noting that adjustments made "internal" may not affect the supply chain. For example, such as...Figure 15 As shown in FIG. 4, the target component is component 4, and the dragging direction is right. The page layout system fails to obtain the influence chain corresponding to component 4, and thus can adjust component 4 based on the constraint information of component 4 itself. As described above, the page layout system can adjust the current size of component 4 to a new size (if the new size is within the size change range of the fourth component).

[0184] Correspondingly, as described above, when adjusting "outward", there can be no influence chain. Thus, when the "inward" adjustment is completed, the page layout ends.

[0185] To facilitate the understanding of the reader, the technical solutions of the present specification will be exemplarily described with respect to one influence chain and multiple influence chains respectively.

[0186] Taking one influence chain as an example, as shown in FIG. 4, the influence chain includes component A, component B, and component C. The size balancing formula is: CL AL + AW + AR BL + BW + BR CR = CW. The target configuration information indicates that CL AL and BR CR are fixed intervals; AR BL is an adaptive interval; AW is a fixed width; BW and CW are adaptive widths. Figure 16 For example, if the component corresponding to the dragging operation is component B, the dragging direction is left, and the target size change amount is 10, i.e., component B needs to be increased by 10 units of width to the left. That is, the left side of component B needs to "eat" 10 units of width. Thus, component B is the target component, BW in the above target configuration information is the constraint information of component B itself, and the other information is the allocation constraint information.

[0187] According to the allocation constraint information, the sizes of CL AL and AW cannot be adjusted, and thus 10 units of width need to be allocated to AR BL, i.e., it is determined whether AR BL can eat 10 units of width. If yes, component B can be increased by 10 units of width to the left. Otherwise, if no, CW is increased by 10 units of width.

[0188] For another example, if the component corresponding to the dragging operation is component C, the dragging direction is left, and the target size change amount is -10, i.e., component C needs to be decreased by 10 units of width to the left. That is, the right side of component C needs to "eat" 10 units of width. The above target configuration information can further include: interval priority and average allocation of each component. Thus, component C is the target component, CW in the above target configuration information is the constraint information of component C itself, and the other information is the allocation constraint information.

[0189]

[0190] ​Accordingly, in combination with the allocation constraint information, it can be known that AR BL can be firstly tried to reduce 10 unit widths. If AR BL can reduce 10 unit widths, AR BL can be reduced 10 unit widths to the right. If AR BL cannot reduce 10 unit widths, for example, it can reduce 6 unit widths, and 4 unit widths are left. The 4 unit widths can be evenly tried to be allocated to AW and BW. If AW and BW can both "eat" 2 unit widths, AW and BW are both reduced 2 unit widths. Otherwise, the width of component C cannot be reduced 10 unit widths to the left, and a corresponding prompt message can be output.

[0191] For example, as shown in FIG. 6, a plurality of influence chains are shown. Figure 17

[0192] For example, if the component corresponding to the dragging operation is component B, the dragging direction is to the right, and the target size change amount is 12, that is, component B needs to be increased 12 unit widths to the right.

[0193] The two influence chains can be simply represented as [B, C, D, S], [B, E, S]. For the influence chain [B, C, D, S], the target configuration information represents that S A, A, A B are fixed sizes; B C, C D, D S are allocated according to the allocation, such as average allocation, etc. For the influence chain [B, E, S], the target configuration information represents that S A, A, A B are fixed sizes; B E, E S are allocated according to the allocation, such as average allocation, etc.

[0194] For the influence chain [B, C, D, S], in combination with the above example and the target configuration information corresponding thereto, the page layout system can allocate 4 unit widths to B C, C D, and D S respectively. So that B C, C D, and D S "eat" 12 unit widths.

[0195] For the influence chain [B, E, S], in combination with the above example and the target configuration information corresponding thereto, the page layout system can allocate 6 unit widths to B E and E S respectively. So that B E and E S "eat" 12 unit widths.

[0196] The parallel chain can be represented as [S, F, G, S], and the target configuration information represents that each component is a fixed size; S F, F G, G S are allocated according to the allocation, such as average allocation, etc. Accordingly, the page layout system can allocate 4 unit widths to S F, F G, and G S respectively. So that S F, F G, and G S "eat" 12 unit widths.

[0197] For example, if the component corresponding to the dragging operation is component B, the dragging direction is to the right, and the target size change amount is 12, that is, component B needs to be increased 12 unit widths to the right. ​

[0198] An influence chain can be represented as [S, A, B, C]. If the target configuration information based on the influence chain determines that the influence chain cannot "eat up" 12 units of width, it is determined that the right side of the chain where the parent component of component C (i.e., component S) influences is [C, D, S] and [B, E, S] respectively, and the two chains are determined as influence chains.

[0199] Correspondingly, referring to the above example, the page layout system can respectively assign 6 units of width to C-D and D-S. So that C-D and D-S "eat up" 12 units of width. The page layout system can assign 6 units of width to B-E and E-S. So that B-E and E-S "eat up" 12 units of width.

[0200] Similarly, for the parallel chain [S, F, G, S], the page layout system can respectively assign 4 units of width to S_F, F_G and G_S. So that S_F, F_G and G_S "eat up" 12 units of width.

[0201] It should be noted that the above examples are only used to illustrate the possible implementation of the page layout method of the present application, and cannot be understood as a limitation on the implementation of the page layout method of the present application. For example, on the basis of the above technical concept, some of the technical features in the above examples can be combined to obtain a new embodiment; new technical features can be added on the basis of the above examples to obtain a new embodiment; some technical features can be reduced on the basis of the above examples to obtain a new embodiment; some technical features in the above examples can be replaced by other technical features; some technical features and order in the above examples can be adjusted to obtain a new embodiment, and the like, which will not be listed one by one here.

[0202] According to the above technical concept, the present application also provides a computer readable non-transitory storage medium, which stores at least one instruction set, when the at least one instruction set is executed by a processor, the steps of the page layout method described in the present application are implemented.

[0203] In some possible implementation, various aspects of the present specification can also be implemented as a program product in the form of a program code. When the program product is run on the page layout system 200, the program code is used to make the page layout system 200 execute the steps of the page layout method described in the present specification. The program product for implementing the above method can include the program code in a portable compact disc read-only memory (CD-ROM) and can be run on the page layout system 200. However, the program product of the present specification is not limited to this, and in the present specification, the readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system. The program product can adopt any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium may, for example, be but is not limited to an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or apparatus, or any combination of the above. More specific examples of the readable storage medium include an electrical connection having one or more wires, a portable disc, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. The computer readable storage medium can include a data signal propagating in a baseband or as a carrier wave in a propagated signal, in which the readable program code is carried. Such a propagated data signal can take on many forms, including but not limited to an electromagnetic signal, an optical signal, or any suitable combination of the above. The readable storage medium can also be any readable medium that is not a storage medium and that can transmit, propagate or transport the program for use by or in connection with an instruction execution system, apparatus or device. The program code contained on the readable storage medium can be transmitted in any suitable medium, including but not limited to wireless, wired, optical, RF, etc., or any suitable combination of the above. The program code for performing the operations of the present specification can be written in any combination of one or more programming languages, including an object-oriented programming language such as Java, C++, etc., and a conventional procedural programming language such as the "C" programming language or similar programming languages. The program code can be executed entirely on the page layout system 200, partially on the page layout system 200, as an independent software package, partially on the page layout system 200, or entirely on a remote page layout system 200.

[0204] The above described embodiments of the disclosure have been described. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims can be performed in a different order and still accomplish desirable results. Additionally, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order to achieve desirable results. In certain implementations, multitasking and parallel processing can be advantageous.

[0205] In light of the above, those skilled in the art will appreciate that the foregoing detailed description of the present disclosure is susceptible to various modifications and / or revisions without departing from the spirit and scope of the present disclosure. Although specific embodiments have been illustrated and described herein, it should be appreciated that any arrangement which is calculated to achieve the same purpose can be substituted for the specific embodiments shown. This disclosure is intended to cover any adaptations or variations of the present disclosure. Therefore, it is intended that the application be protected by: the broadest interpretation of the appended claims to take into account unforeseen equivalents and alternatives based on current knowledge, or future knowledge.

[0206] In addition, certain terminology has been used to describe embodiments of the disclosure. For example, "one embodiment," "an embodiment," and / or "some embodiments” means that a particular feature, structure, or characteristic described in connection with the embodiment is included in at least one embodiment of the disclosure. Therefore, it is understood that the use of "embodiment" or "one embodiment" or "an embodiment" or "some embodiments” in various places throughout this specification are not necessarily referring to the same embodiment. Furthermore, the particular features, structures, or characteristics can be combined in any suitable manner on one or more embodiments without limitation.

[0207] It should be understood that in the foregoing description of embodiments of the disclosure, various features are sometimes grouped together in a single embodiment, figure, or description of a figure for the purpose of streamlining the disclosure and aiding in the understanding of one or more of the various aspects, embodiments, and / or features. However, this should not be interpreted as a requirement that these features must be provided together in order to form an embodiment of the disclosure. In fact, some embodiments of the disclosure can provide only a subset of these features. In addition, streams of features from different embodiments can be combined to provide an embodiment of the disclosure. In some cases, features from one embodiment can be combined with features from another embodiment to provide an embodiment of the disclosure. In some cases, features from one embodiment can be combined with features from another embodiment to provide an embodiment of the disclosure.

[0208] Each patent, patent application, publication of a patent application, and other material, for example articles, books, specifications, publications, documents, things, and / or the like which can have been cited or referred to in this document, are incorporated by reference into the present document, and are hereby made part of the present document, for all purposes, to the same extent as if each individual publication or item had been individually cited or incorporated by reference. Additionally, where a definition or use of a term in this document is provided to overcome a definition or use of the term in an individually cited document that is incorporated by reference, the definition or use of the term in this document prevails.

[0209] Finally, it should be understood that the embodiments of the application disclosed herein are illustrative of the principles of the present specification. Other modifications that fall within the scope of the present specification can also be made. Accordingly, the present specification discloses embodiments only as examples. Substantially any arrangement, which is neither specifically described nor explicitly illustrated, can be substituted for the specific embodiments disclosed, without departing from the scope of the present specification. Accordingly, the present specification discloses embodiments only as examples.

Claims

1. A page layout method applied to an initial page comprising multiple components, each component having its own corresponding current size, the method comprising: In response to a user's drag operation on a target component among the plurality of components, the new size of the target component is obtained; In the drag direction of the drag operation, at least one influence chain is determined that is affected by the size change of the target component. The at least one influence chain includes the target component and other elements, including influencing components affected by the size change of the target component and the influence spacing between components in the at least one influence chain. The at least one influence chain includes line segment representation information abstracted from the current size of the at least one influence chain. The current size of at least one influence chain is adjusted based on the new size and the line segment representation information to obtain the target page.

2. The method according to claim 1, wherein, The method further includes: Obtain target configuration information for the target component, wherein the target configuration information is used to characterize the constraint information on the size adjustment of the at least one influence chain; And, the step of adjusting the current size of the at least one influence chain according to the new size to obtain the target page includes: constraining the operation of adjusting the current size of the at least one influence chain according to the new size and the line segment representation information based on the target configuration information to obtain the target page.

3. The method according to claim 2, wherein, The target configuration information includes self-constraint information and allocation constraint information, wherein the self-constraint information is used to constrain the size adjustment of the target component, and the allocation constraint information is used to constrain the size adjustment of other elements in the at least one influence chain.

4. The method according to claim 3, wherein, The step of constraining the operation of adjusting the current size of at least one influencing chain according to the new size and the line segment representation information based on the target configuration information to obtain the target page includes: Based on the self-constraint information and the new size, determine the target size of the target component in the target page; and Based on the target size and the allocation constraint information, the operation of adjusting the current size of the at least one influence chain is constrained to obtain the target page.

5. The method according to claim 4, wherein, The step of constraining the operation of adjusting the current size of at least one influence chain based on the target size and the allocation constraint information to obtain the target page includes: Determine the initial dimensional change between the target size and the current size of the target component; and Based on the allocation constraint information and the initial size change, the current size of at least one influence chain is adjusted to obtain the target page.

6. The method according to claim 5, wherein, The step of adjusting the current size of at least one influence chain based on the allocation constraint information and the initial size change to obtain the target page includes: Based on the allocation constraint information, the initial size change is tentatively allocated to each element of the at least one influence chain to obtain the expected size of the at least one influence chain, wherein each element includes the target component and the other elements; and The target page is obtained by adjusting the current size of at least one influence chain according to the desired size and the allocation constraint information.

7. The method according to claim 6, wherein, The at least one influence chain can be multiple influence chains; adjusting the current size of the at least one influence chain according to the desired size and the allocation constraint information to obtain the target page includes: Based on the initial size change, determine the target desired size from among the desired sizes that satisfies the multiple factors affecting chain size changes; and The target page is obtained by adjusting the current size of the multiple influence chains according to the target expected size and the allocation constraint information.

8. The method according to claim 7, wherein, The step of determining the target desired size that satisfies the multiple influencing chain size changes from each desired size based on the initial size change includes: If the initial size change is positive, then the minimum expected size is obtained from each expected size, and the minimum expected size is determined as the target expected size; If the size change is negative, then the maximum expected size is obtained from each expected size, and the maximum expected size is determined as the target expected size.

9. The method according to claim 7, wherein, Adjusting the current size of the multiple influence chains according to the target desired size and the allocation constraint information to obtain the target page includes: The difference between the target desired size and the current size of the target component is determined as the target size change. The target size change is allocated to the multiple influence chains according to the allocation constraint information, so as to adjust the current size of the multiple influence chains and obtain the target page.

10. The method according to claim 3, wherein, The allocation constraint information is determined based on the line segment representation information and satisfies the dimensional balancing information constructed based on the line segment representation information; The dimensional balancing information indicates that the total length of the at least one influence chain is equal to the sum of the dimensions of each component in the at least one influence chain and the dimensions of the influence spacing.

11. The method according to claim 1, wherein, In the drag direction of the drag operation, at least one influence chain affected by the size change of the target component is determined, including: The initial page is divided into multiple blocks, and the target block containing the target component is determined; and The at least one influence chain is determined based on the drag direction and the target block.

12. The method according to claim 11, wherein, Determining the at least one influence chain based on the drag direction and the target block includes: In the initial page, other components located in the drag direction of the target block are traversed to obtain influencing components whose projections at least partially overlap with the target component; and The at least one influence chain is constructed based on the influence component, and the line segment representation information is determined based on the current size of the at least one influence chain.

13. The method according to claim 1, wherein, The method further includes: If the size of the at least one influence chain is a fixed size, then the at least one influence chain is updated according to the opposite direction of the drag direction.

14. The method according to claim 1, wherein, The method further includes: Obtain the parallel chains in the initial page that do not interfere with the at least one influencing chain; Based on the configuration information of the parallel chain and the size adjustment operation of the at least one influencing chain, the current size of the parallel chain is adjusted to obtain the target page, wherein the configuration information of the parallel chain is used to characterize the constraint information on the size adjustment of the parallel chain.

15. A page layout system, comprising: At least one storage medium storing at least one instruction set for page layout; At least one processor is communicatively connected to the at least one storage medium, wherein when the at least one processor is running, it reads the at least one instruction set and executes the method as described in any one of claims 1 to 14 according to the instructions of the at least one instruction set.

16. A computer-readable non-transitory storage medium, wherein, The computer-readable non-transitory storage medium stores at least one set of instructions, which is executed by at least one processor to implement the method as described in any one of claims 1 to 14.

Images