A page layout method, page layout device and computer storage medium

Abstract

The present application proposes a page layout method, a page layout device, and a computer storage medium. The page layout method includes: in response to a cropping instruction of a container in a page, obtaining a parent container of the cropped container and a target container after cropping; creating a sibling container of the target container in the parent container, and placing the sibling container after the target container; and setting the container size of the sibling container based on the container size of the cropped container. The above-mentioned page layout method breaks the limitations of traditional grid layout, and by using an abstract encapsulated layout container component to lay out the page, provides free adjustment of the container, and improves the flexibility of page layout.

Description

Technical Field

[0001] The present application relates to the field of low-code development technology, and in particular to a page layout method, a page layout device, and a computer storage medium. Background Art

[0002] Low-code development has become a new solution to help enterprises with digital transformation. However, in the process of low-code application development, users need to build pages as the display interface of the application; in the process of page construction, they need to solve the problem of how to arrange components. The core is page layout. How to efficiently, conveniently and accurately realize the placement of components and combine the expected page display effect has become a more difficult problem. The traditional solution is usually to divide the entire page into several grids, such as the front-end 24-grid layout technology or streaming layout, grid layout, etc. In the field of low-code application page development, existing solutions are either not flexible enough to meet complex layout scenarios, or have complex configurations and high usage barriers.‌ Summary of the invention

[0003] In order to solve the above technical problems, the present application proposes a page layout method, a page layout device and a computer storage medium.

[0004] In order to solve the above technical problems, the present application proposes a page layout method, which includes:

[0005] In response to a clipping instruction of a container in the page, obtaining a parent container of the clipped container and a target container after clipping;

[0006] Create a sibling container of the target container in the parent container, and place the sibling container after the target container;

[0007] The container size of the sibling container is set based on the container size of the clipped container.

[0008] To solve the above technical problems, the present application also proposes a page layout device, which includes a memory and a processor coupled to the memory; wherein the memory is used to store program data, and the processor is used to execute the program data to implement the page layout method as described above.

[0009] In order to solve the above technical problems, the present application also proposes a computer storage medium, wherein the computer storage medium is used to store program data, and when the program data is executed by a computer, it is used to implement the above page layout method.

[0010] Compared with the prior art, the beneficial effects of the present application are as follows: the page layout device responds to the cropping instruction of the container in the page, obtains the parent container of the cropped container and the cropped target container; creates a new sibling container of the target container in the parent container, and places the sibling container after the target container; and sets the container size of the sibling container based on the container size of the cropped container. Through the above-mentioned page layout method, the limitations of the traditional grid layout are broken, and the page is laid out by using the abstract encapsulated layout container component, providing free adjustment of the container and improving the flexibility of the page layout. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. Among them:

[0012] Figure 1 It is a display schematic diagram of an embodiment of a container cutting interface provided by the present application;

[0013] Figure 2 It is a schematic diagram of the interface after the container provided by the present application is cut longitudinally;

[0014] Figure 3 It is a schematic diagram of the interface after the container provided by the present application is cut horizontally;

[0015] Figure 4 It is a flowchart of the first embodiment of the page layout method provided by the present application;

[0016] Figure 5 It is a schematic diagram of the overall process of an embodiment of container cutting provided by the present application;

[0017] Figure 6 It is a flowchart of an embodiment of a parent container determination solution provided by the present application;

[0018] Figure 7 This is a flowchart of setting related styles of sibling containers and clipped containers provided by this application;

[0019] Figure 8 It is a flow chart of the second embodiment of the page layout method provided by the present application;

[0020] Fig. 9 It is a schematic diagram of the overall process of an embodiment of container height adjustment provided by the present application;

[0021] Fig.10It is a schematic diagram of the overall process of an embodiment of adaptively adjusting the height of sequential sibling container sub-assemblies provided by the present application;

[0022] Fig.11 It is a schematic diagram of the overall process of an embodiment of the current container sub-assembly adaptively adjusting the height provided by the present application;

[0023] Fig.12 It is a schematic diagram of the overall process of an embodiment of container width adjustment provided by the present application;

[0024] Fig.13 It is a schematic diagram of the overall process of an embodiment of adaptively adjusting the width of sequential sibling container sub-components provided by the present application;

[0025] Fig.14 It is a schematic diagram of the overall process of an embodiment of adaptively adjusting the width of a current container subcomponent provided by the present application;

[0026] Fig.15 It is a flowchart of the third embodiment of the page layout method provided by the present application;

[0027] Fig.16 It is a schematic diagram of the overall process of an embodiment of container deletion provided by the present application;

[0028] Fig.17 It is a structural schematic diagram of an embodiment of a page layout device provided by the present application;

[0029] Fig.18 It is a structural diagram of an embodiment of a computer storage medium provided by the present application. DETAILED DESCRIPTION

[0030] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0031] The terms "first", "second", "third", "fourth", etc. (if any) in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present application described herein can, for example, be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0032] In order to solve the problems of the prior art, the present application provides a low-code development application page layout method.

[0033] Specifically, the page layout method of the present application can respond to a page building request and open a page editor workbench. The building process is generally: arrange the overall layout of the page according to needs, such as a "factory" font layout or "top, middle, bottom" or "left, middle, right" layout, etc., and each small layout block generally has more layout details nested in it.

[0034] Low-code application pages are generally composed of dragging and filling functional components in the smallest layout block, including but not limited to: button components, input box components, drop-down box components, etc. Different components have different functions, and the overall function of the page is realized after combined configuration.

[0035] The page layout method of the present application solves the problem of free layout of pages, abstractly encapsulates layout container components, and uses layout container components to layout pages. It can be freely dragged and moved at the pixel level, multi-level nested arrangement, pixel-level width and height setting, and content adaptive. It is simple, easy to use, flexible and efficient.

[0036] Specifically, each layout container component involved in this application has but is not limited to the following functions:

[0037] Container dragging: A layout container component can be dragged and added to the layout canvas, and its position in the canvas can be dragged, moved and placed arbitrarily.

[0038] Container clipping: After a layout container component is dragged into the canvas, it is automatically parsed into a container root node (referred to as the root container). When the mouse hovers over the root container, a vertical "scissors" style button and a horizontal "scissors" style button are displayed. The specific display interface is as follows: Figure 1 As shown, Figure 1 It is a display schematic diagram of an embodiment of a container cutting interface provided by the present application.

[0039] Furthermore, when the user chooses to click the vertical "scissors" style button, Figure 1 The layout container component shown is clipped vertically to form the following Figure 2 The clipped container interface, wherein: Figure 2 Schematic diagram of the interface after the container is cut longitudinally provided in this application. Figure 2 As shown, after vertical cropping, the solid line container on the left is marked as the current container, and the dotted line container on the right is the cropped container.

[0040] Furthermore, when the user chooses to click the horizontal "scissors" style button, Figure 1 The layout container component shown is clipped horizontally to form the following Figure 3 The clipped container interface, wherein: Figure 3 Schematic diagram of the interface after the container is cut horizontally provided in this application. Figure 3 As shown, after vertical cropping, the upper solid line container is marked as the current container, and the lower dotted line container is the cropped container.

[0041] It should be noted that if the container before clipping is a parent container, the clipped child container itself is also a layout container and can be clipped in a "nesting doll-like" manner, that is, further clipping can be performed.

[0042] The layout container component involved in this application also has the following functions:

[0043] Setting width and height: After a layout container component is dragged into the layout canvas, the default width is adaptive to the width of the current canvas, and the default height is 80px, which is an empirical value for visual effects and can be configured by the system. Both the root container and the derived container involved in this application support setting width and height. In particular, the derived subcontainer supports adjusting the container size by dragging, such as Figures 1 to 3 If a container is selected, the handle on the right border of the container is highlighted, which means that the width can be adjusted by horizontal dragging, or the handle on the bottom border of the container is highlighted, which means that the height can be adjusted by vertical dragging. Both the height and width can be adjusted by dragging.

[0044] For the sake of simplicity and ease of understanding, it is generally agreed that the sub-container generated by vertical cropping can only be dragged horizontally to adjust the width, and the sub-container generated by horizontal cropping can only be dragged vertically to adjust the height. In other embodiments, the sub-container generated by vertical cropping or horizontal cropping can be dragged horizontally to adjust the width, and dragged vertically to adjust the height.

[0045] Content adaptation: When the height or width of the container is adjusted, the nested subcomponents of the container can adapt to the size, width and height of the parent container component. There is no need to manually adjust the nested subcomponents, and they are automatically filled.

[0046] Support deletion: In the layout process, repeated attempts are inevitable to achieve a satisfactory effect, and deletion is essential. This method supports deleting containers and their contents. After a container is deleted, its surrounding sibling containers are filled in according to the established rules, and the original space occupied by the deleted container is automatically filled.

[0047] The following describes in detail the different functions of the layout container component of the present application through the page layout methods of different embodiments:

[0048] When building a page, drag a layout container to the appropriate location on the canvas as required. When selecting the layout container for cropping, please refer to Figure 4 and Figure 5 , Figure 4 is a flow chart of the first embodiment of the page layout method provided by the present application, Figure 5 It is a schematic diagram of the overall process of an embodiment of container cutting provided by the present application.

[0049] The page layout method of the present application is applied to a page layout device, wherein the page layout device of the present application can be a server, a terminal device, or a system in which a server and a terminal device cooperate with each other. Accordingly, the various parts included in the page layout device, such as various units, sub-units, modules, and sub-modules, can all be set in the server, can all be set in the terminal device, or can be set in the server and the terminal device respectively.

[0050] Furthermore, the above-mentioned server can be hardware or software. When the server is hardware, it can be implemented as a distributed server cluster consisting of multiple servers, or it can be implemented as a single server. When the server is software, it can be implemented as multiple software or software modules, such as software or software modules used to provide distributed servers, or it can be implemented as a single software or software module, which is not specifically limited here.

[0051] like Figure 4 As shown, the specific steps are as follows:

[0052] Step S11: in response to a clipping instruction of a container in the page, a parent container of the clipped container and a target container after clipping are obtained.

[0053] In the embodiment of the present application, the page layout device receives or generates a cropping instruction for any container in the low-code page. Figure 1 When the "scissors" style button is pressed, the page layout device generates a cutting instruction for the container. At this time, the container is the cut container, and the page layout device needs to further obtain the parent container of the cut container, which is mainly used to determine the container style of the cut container.

[0054] Generally speaking, both a container and a component in a container have a parent container or a parent component. The page layout device can search for the parent container of the clipped container by searching for the parent-child relationship of the clipped container or the child components in the clipped container.

[0055] However, as mentioned above, this application mainly implements page layout for the clipping function of the layout container component. Therefore, the page layout device needs to ensure that the parent container of the clipped container is a container of the layout container component type. Figure 5 and Figure 6 , Figure 6 It is a flowchart of an embodiment of a parent container determination solution provided in the present application.

[0056] like Figure 6 As shown, Figure 4 The specific process of step S11 in the page layout method shown is as follows:

[0057] Step S111: Get the current parent container of the clipped container.

[0058] In the embodiment of the present application, the page layout device determines the current parent container of the clipped container according to the parent-child relationship.

[0059] Step S112: In response to the current parent container being a layout container component, and the current clipping direction being consistent with the component arrangement direction of the current parent container, the current parent container is used as the parent container of the clipped container.

[0060] In an embodiment of the present application, the page layout device determines whether the current parent container is a layout container type component and determines whether the current cropping direction, whether it is horizontal cropping or vertical cropping, is consistent with the direction attribute of the parent container. If the conditions are met, the current parent container can be directly used as the parent container of the cropped container.

[0061] It should be noted that the page layout device can determine whether the current parent container is a layout container according to the container properties of the current container. Among them, the layout container is a common container component used to control the layout of other components. Common layout containers include flow layout containers, table layout containers, grid layout containers, etc. Their usage methods are different, but they can all freely arrange and combine the internal components to achieve rich and diverse layout effects.

[0062] In addition to the layout container, other attribute containers include but are not limited to: window container, panel container, etc.

[0063] The parent container itself has a direction attribute, which is arranged vertically by default, and is used to identify whether its direct child components are arranged horizontally or vertically. Therefore, the page layout device can use the component arrangement direction of the child components of the parent container as the direction attribute of the parent container.

[0064] It should be noted that each type of component on the low-code platform has a specific type attribute, and the type of the component can be determined by the type attribute.

[0065] Step S113: In response to the current parent container not being a layout container component, or the current clipping direction being inconsistent with the component arrangement direction of the current parent container, a new parent container is created according to the container size of the clipped container before clipping and the current clipping direction, and the clipped container is placed in the parent container.

[0066] In the embodiment of the present application, if the current parent container is not a layout container component, or the current clipping direction is inconsistent with the component arrangement direction of the current parent container, it means that the current parent container does not meet the clipping conditions of the layout container component. At this time, the page layout device needs to create a new parent container, the width and height of the new parent container are consistent with the clipped container, and the direction attribute is consistent with the current clipping direction of the clipped container, which is equivalent to creating a parent container for the clipped container to meet the clipping conditions of the layout container component.

[0067] Step S12: creating a sibling container of the target container in the parent container, and placing the sibling container after the target container.

[0068] In the embodiments of the present application, Figure 5 As shown, after the page layout device clips the clipped container according to the clipping instruction, it obtains the target container. Then, the page layout device creates a sibling container of the target container in the parent container determined in step S11, and places the sibling container after the target container. Figure 2 and Figure 3 The dotted container is shown.

[0069] like Figure 2 and Figure 3 As shown, the position after the target container is the area of ​​the parent container excluding the target container.

[0070] Specifically, the page layout device creates a sibling container in the parent container and places it after the clipped container, that is, a new container is derived and is in the same parent container as the clipped container.

[0071] Step S13: setting the container size of the sibling container based on the container size of the clipped container.

[0072] In the embodiments of the present application, Figure 5 As shown, the page layout device sets the relevant styles of the sibling container and the target container, and highlights the target container. Among them, the relevant styles of the above-mentioned relevant containers are usually determined according to the parameters input by the cropping instruction. For details, please continue to refer to Figure 7 , Figure 7 This is a flowchart of setting related styles of sibling containers and clipped containers provided by this application.

[0073] like Figure 7 As shown, the page layout device determines whether the current cropping direction is horizontal cropping.

[0074] In response to the current cropping direction being horizontal cropping, the page layout device sets the container width of the sibling container according to the width of the cropped container, and sets the container height of the sibling container according to the cropped height of the cropped container, that is, the following is obtained: Figure 3 The sibling containers and the target container are shown.

[0075] In response to the current cropping direction being vertical cropping, the page layout device sets the container height of the sibling container according to the height of the cropped container, and sets the container width of the sibling container according to the cropped width of the cropped container, so as to obtain the following: Figure 2 The sibling containers and the target container are shown.

[0076] In other embodiments, the page layout device may also determine whether the current cropping direction is vertical cropping, and its determination logic and processing logic are not described in detail here.

[0077] In the present application, the page layout device responds to the cropping instruction of the container in the page, obtains the parent container of the cropped container and the cropped target container; creates a new sibling container of the target container in the parent container, and places the sibling container after the target container; and sets the container size of the sibling container based on the container size of the cropped container. The above page layout method breaks the limitations of the traditional grid layout, and layouts the page by using the abstract encapsulated layout container component, provides free adjustment of the container, and improves the flexibility of the page layout.

[0078] The layout container component of this application also has the function of setting width and height, and compared with conventional low-code technology, the layout container component of this application provides a simpler operation method. For details, please refer to Figure 8 and Fig. 9 .in, Figure 8 is a flow chart of the second embodiment of the page layout method provided by the present application, Fig. 9 It is a schematic diagram of the overall process of an embodiment of container height adjustment provided by the present application.

[0079] like Figure 8 As shown, the page layout method of the embodiment of the present application includes the following steps:

[0080] Step S21: in response to a size adjustment instruction of a container in the page, obtaining a sibling container in the size adjustment direction.

[0081] In an embodiment of the present application, the user selects a layout container and can directly set a height value in the property style panel, or can set the height more conveniently and directly by dragging the handle up and down. At this time, the page layout device can generate a size adjustment instruction for the layout container selected by the user.

[0082] Further, Fig. 9 A specific embodiment of adjusting the height of the container is given. Fig. 9 As shown, the page layout device adjusts the size direction from top to bottom or from bottom to top.

[0083] At this time, the page layout device preferentially determines whether the layout container selected by the user has a lower sibling container or an upper sibling container. If both are present, the first sibling container below the layout container selected by the user is preferentially used as the "first-order" sibling container, that is, the order sibling container that needs to be resized. If there is only an upper sibling container, the first sibling container above the layout container selected by the user is used as the "first-order" sibling container, that is, the order sibling container that needs to be resized.

[0084] If there is no lower sibling container or upper sibling container, you only need to directly adjust the size of the layout container selected by the user.

[0085] Step S22: adjusting the container sizes of the sibling containers in sequence and the container size of the current container according to the size adjustment instruction.

[0086] In the embodiment of the present application, the page layout device adjusts the size of the container selected by the user according to the size adjustment direction and size adjustment parameters in the size adjustment instruction. If there are sibling containers, the size of the sibling containers needs to be changed synchronously to keep the parent container unchanged. For example, if the height of the container selected by the user increases, the height of the sibling containers decreases accordingly.

[0087] In other embodiments, the page layout device may also set in advance that the sizes of the sibling containers are kept consistent. In this case, if the user selects to increase the height of a container, the heights of the sibling containers in sequence will increase accordingly.

[0088] Furthermore, when the user selects a layout container to adjust the width and height, in addition to the height or width of the container itself, if there is a nested container, the content will also adapt. For example, for details, please refer to Fig.10 , Fig.10 It is a schematic diagram of the overall process of an embodiment of adaptive height adjustment of sequential sibling container sub-components provided in the present application.

[0089] like Fig.10As shown, when the sequential sibling container is the upper container, the page layout device traverses the bottommost subcomponent of each layer of subcomponents of the sequential sibling container, and adjusts the height value of the bottommost subcomponent according to the size adjustment instruction.

[0090] When the sequential sibling container is a lower sibling container, the page layout device traverses the uppermost subcomponent of each layer of subcomponents of the sequential sibling container, and adjusts the height value of the uppermost subcomponent according to the size adjustment instruction.

[0091] The logic of subcomponent resizing is basically the same as that of container resizing, so I will not go into details here.

[0092] Specifically, the newly set height value may be greater than or less than the previous height. When the height increases, it is necessary to squeeze the space of the upper or lower sibling containers. Similarly, when the height decreases, it is also necessary to "give up" space to the upper or lower containers.

[0093] This application defines the sibling container that is squeezed or obtains the "relinquished" space as the "first priority" container. The "first priority" container will obtain the "relinquished" space in full or give up its own space to the current container. The lower side is prioritized by default, that is, when the current container has a lower sibling container, the lower sibling container becomes the "first priority". If the current container has no lower sibling container, the upper container of the neighbor is selected as the "first priority". If the "first priority" container cannot be found, the current container can be directly adjusted.

[0094] If there is a "first-order" container, change the height of the "first-order" container. If there is a nested component, in addition to changing its own height, it is also necessary to recursively traverse its nested subcomponents to adapt to the height change. The adaptive process is as follows: Fig.10 shown.

[0095] In addition, the page layout device changes the height of the current container. If there are nested components, in addition to changing their own height, it is also necessary to recursively traverse its nested subcomponents to adapt to the height changes. The adaptive process is as follows: Fig.11 As shown, Fig.11 It is a schematic diagram of the overall process of an embodiment of the current container sub-assembly adaptively adjusting the height provided by the present application.

[0096] Similarly, the page layout device can also adjust the width of the container selected by the user. For details, please refer to Fig.12 , Fig.12 It is a schematic diagram of the overall process of an embodiment of container width adjustment provided by the present application.

[0097] In this application, the principle of adjusting the width is as follows:

[0098] Step 1: Select the layout container. You can directly set a width value in the Property Style panel, or you can drag the handle left and right to set the width more conveniently and directly.

[0099] Step 2: The newly set width value may be greater than or less than the previous width. When the width increases, the space of the brother container on the left or right needs to be squeezed. Similarly, when the width decreases, space needs to be "relinquished" to the container on the left or right. This method defines the brother container that is squeezed or obtains the "relinquished" space as the "first priority" container. The "first priority" container will obtain the "relinquished" space in full or give up its own space to the current container. The right side is prioritized by default, that is, when the current container has a brother container on the right side, the brother container on the right side becomes the "first priority". If the current container has no brother container on the right side, the neighboring left container is selected as the "first priority". If the "first priority" container cannot be found, go directly to step 4, otherwise go to step 3.

[0100] Step 3: Change the width of the "first priority" container. If there are nested components, in addition to changing their own width, you also need to recursively traverse its nested subcomponents to adapt to the width changes. For the adaptation process, please refer to Fig.13 ,in, Fig.13 It is a schematic diagram of the overall process of an embodiment of adaptively adjusting the width of sequential sibling container sub-components provided by the present application.

[0101] In addition, the page layout device changes the current container width. If there are nested components, in addition to changing their own width, it is also necessary to recursively traverse its nested subcomponents to adapt to the width changes. For the adaptation process, please refer to Fig.14 ,in, Fig.14 It is a schematic diagram of the overall process of an embodiment of adaptively adjusting the width of the current container sub-component provided by the present application.

[0102] Furthermore, when a container is deleted, its surrounding sibling containers are filled in according to the established rules, and the original space occupied by the deleted container is automatically filled. For the filling rules, please refer to Fig.15 and Fig.16 .in, Fig.15 is a flow chart of the third embodiment of the page layout method provided by the present application, Fig.16 It is a schematic diagram of the overall process of an embodiment of container deletion provided by the present application.

[0103] like Fig.15 As shown, the page layout method of the embodiment of the present application specifically includes the following steps:

[0104] Step S31: in response to a delete instruction of a container in a page, obtain the sequential sibling containers and the parent container of the deleted container.

[0105] In the embodiment of the present application, the page layout device first obtains the "first-order" container of the deleted container in the same manner as the above-mentioned embodiment steps of setting the height and width, which will not be repeated here.

[0106] Step S32: adjusting the container size of the sibling containers in the same order according to the component arrangement direction of the parent container and the container size of the deleted container.

[0107] In the embodiment of the present application, the page layout device needs to determine whether the deleted container and its sibling containers are arranged horizontally or vertically, which can be determined by the direction attribute of the parent container.

[0108] like Fig.16 As shown, if it is arranged horizontally, the space of the deleted container will be "relinquished" to the "first priority" container to adjust the width, otherwise the height will be adjusted. If there are nested components, they also need to adapt to the changes, as described in the adaptive implementation example in the previous section, and will not be repeated here.

[0109] To sum up, the page layout method of the present application breaks the limitations of traditional grid layout by abstracting and encapsulating layout container components, provides free dragging, cropping, setting width and height, and content adaptation functions, realizes responsive layout of the page, is simple and easy to use, flexible and efficient, and can meet the needs of complex scenarios.

[0110] The page layout method of the present application breaks the limitations of traditional grid layout. By utilizing abstract encapsulated layout container components to layout the page, it can freely drag and move at the pixel level, nest multi-level layout, and set the width and height at the pixel level, and the content is adaptive. It is simple, easy to use, flexible and efficient.

[0111] The page layout method of the present application abstractly encapsulates the layout container component, which supports horizontal and vertical cutting, and can directly derive multiple sub-layout containers for multi-level nesting, and the width and height can be adjusted at the pixel level by dragging the handle. For scenarios requiring multiple layout containers, it is more convenient and efficient than the traditional solution of dragging them again from the component list.

[0112] Those skilled in the art will appreciate that, in the above method of specific implementation, the order in which the steps are written does not imply a strict execution order and does not constitute any limitation on the implementation process. The specific execution order of the steps should be determined by their functions and possible internal logic.

[0113] To implement the above page layout method, this application also proposes a page layout device, please refer to Fig.17 , Fig.17 It is a structural schematic diagram of an embodiment of a page layout device provided by the present application.

[0114] The page layout device 400 of this embodiment includes a processor 41 , a memory 42 , an input / output device 43 , and a bus 44 .

[0115] The processor 41 , the memory 42 , and the input / output device 43 are respectively connected to the bus 44 . The memory 42 stores program data, and the processor 41 is used to execute the program data to implement the page layout method described in the above embodiment.

[0116] In the embodiment of the present application, the processor 41 may also be referred to as a CPU (Central Processing Unit). The processor 41 may be an integrated circuit chip having the ability to process signals. The processor 41 may also be a general-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA), or other programmable logic devices, discrete gates or transistor logic devices, or discrete hardware components. A general-purpose processor may be a microprocessor or the processor 41 may also be any conventional processor, etc.

[0117] This application also provides a computer storage medium, please continue to refer to Fig.18 , Fig.18 It is a schematic diagram of the structure of an embodiment of a computer storage medium provided in the present application. The computer storage medium 600 stores a computer program 61. When the computer program 61 is executed by a processor, it is used to implement the page layout method of the above embodiment.

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

[0119] The above description is only an implementation method of the present application, and does not limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made using the contents of the present application specification and drawings, or directly or indirectly used in other related technical fields, are also included in the patent protection scope of the present application.

Claims

1. A page layout method, characterized in that: The page layout method comprises: In response to a clipping instruction of a container in the page, obtaining a parent container of the clipped container and a target container after clipping; Create a sibling container of the target container in the parent container, and place the sibling container after the target container; Setting the container size of the sibling container based on the container size of the clipped container; The step of obtaining the parent container of the clipped container includes: Get the current parent container of the clipped container; In response to the current parent container being a layout container component, and the current clipping direction being consistent with the component arrangement direction of the current parent container, the current parent container is used as the parent container of the clipped container; In response to the current parent container not being a layout container component, or the current clipping direction being inconsistent with the component arrangement direction of the current parent container, a new parent container is created according to the container size of the clipped container before clipping and the current clipping direction, and the clipped container is placed in the parent container.

2. The page layout method according to claim 1, characterized in that: The step of setting the container size of the sibling container based on the container size of the clipped container includes: In response to the current cropping direction being horizontal cropping, setting the container width of the sibling container according to the width of the cropped container, and setting the container height of the sibling container according to the cropped height of the cropped container; In response to the current cropping direction being vertical cropping, the container height of the sibling container is set according to the height of the cropped container, and the container width of the sibling container is set according to the cropped width of the cropped container.

3. The page layout method according to claim 1, characterized in that: The page layout method comprises: In response to a size adjustment instruction of a container in the page, obtain a sibling container in the size adjustment direction; The container sizes of the sibling containers in sequence and the container size of the current container are adjusted according to the size adjustment instruction.

4. The page layout method according to claim 3, characterized in that: The size adjustment direction is the height direction; The obtaining of the sibling containers in the order of the size adjustment direction includes: In response to the current container having a lower sibling container, obtaining the first lower sibling container of the current container as the sequential sibling container; In response to the current container having no lower sibling container but having an upper sibling container, the first upper sibling container of the current container is obtained as the sequential sibling container.

5. The page layout method according to claim 4, characterized in that: The step of adjusting the container size of the sequential sibling container according to the size adjustment instruction includes: In response to the sequential sibling container being an upper sibling container, traversing the bottommost subcomponent of each layer of subcomponents of the sequential sibling container, and adjusting the height value of the bottommost subcomponent according to the size adjustment instruction; In response to the sequential sibling container being a lower sibling container, traverse the uppermost subcomponent of each layer of subcomponents of the sequential sibling container, and adjust the height value of the uppermost subcomponent according to the size adjustment instruction.

6. The page layout method according to claim 1, characterized in that: The page layout method further includes: In response to a delete instruction of a container in the page, obtain the sequential sibling container and the parent container of the deleted container; The container size of the sibling container in the same order is adjusted according to the component arrangement direction of the parent container and the container size of the deleted container.

7. The page layout method according to claim 1, characterized in that: The page layout method further includes: In response to the container dragging instruction, the layout container component is dragged to any pixel position of the page.

8. A page layout device, characterized in that: The page layout device includes a memory and a processor coupled to the memory; The memory is used to store program data, and the processor is used to execute the program data to implement the page layout method according to any one of claims 1 to 7.

9. A computer storage medium, characterized in that The computer storage medium is used to store program data, and when the program data is executed by a computer, it is used to implement the page layout method according to any one of claims 1 to 7.

Images