CN114880061B

CN114880061B - Page component processing method and device, electronic equipment and medium

Info

Publication number: CN114880061B
Application number: CN202210594321.3A
Authority: CN
Inventors: 杜秦芝; 张志诚; 马海娜; 黄诗铭
Original assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Current assignee: Beijing Baidu Netcom Science and Technology Co Ltd
Priority date: 2022-05-27
Filing date: 2022-05-27
Publication date: 2023-02-28
Anticipated expiration: 2042-05-27
Also published as: CN114880061A

Abstract

The disclosure provides a page component processing method and device, electronic equipment, a computer readable storage medium and a computer program product, and relates to the field of computers, in particular to the technical field of application programs. The implementation scheme is as follows: setting a first component in the target page to a moving state in response to the component adjustment instruction; determining first position information of a second assembly in the target page, wherein the second assembly is an assembly in the target page, and the state of the second assembly is not a moving state; responding to a moving instruction aiming at the first assembly, and acquiring second position information of the moved first assembly; determining whether the first component and the second component satisfy an alignment condition based on the first position information and the second position information; in response to determining that the alignment condition is met, performing alignment operation on the first assembly and the second assembly and displaying an auxiliary line, wherein the auxiliary line connects the aligned first assembly and the aligned second assembly; and setting the first component to a non-moving state in response to the exit component adjustment instruction.

Description

Page component processing method and device, electronic equipment and medium

Technical Field

The present disclosure relates to the field of computers, and in particular, to the field of application program technologies, and in particular, to a method and an apparatus for processing a page component, an electronic device, a computer-readable storage medium, and a computer program product.

Background

With the development of science and technology, the functions of the application programs are more and more abundant, and more convenience is provided for the life of people. For example, when a relevant page of an application program is created, layout operation needs to be performed on different components in different modules, so that the landing page is compact and attractive as a whole. However, when a user edits the positions of the components in the canvas area of the station building editor, the components often cannot be quickly aligned, so that on one hand, the effect of designing the manuscript cannot be accurately restored; and on the other hand, the experience and efficiency of the user for building the station are influenced.

Disclosure of Invention

The disclosure provides a processing method and device of a page component, an electronic device, a computer readable storage medium and a computer program product.

According to an aspect of the present disclosure, a method for processing a page component is provided, including: setting a first component in the target page to a moving state in response to the component adjustment instruction; determining first position information of a second component in the target page, wherein the second component is a component of which the state in the target page is not the moving state; responding to a movement instruction aiming at the first assembly, and acquiring second position information of the first assembly after movement; determining whether the first component and the second component satisfy an alignment condition based on the first position information and the second position information; in response to determining that the alignment condition is satisfied, performing an alignment operation on the first component and the second component and displaying an auxiliary line, wherein the auxiliary line connects the aligned first component and the aligned second component; and setting the first component to a non-moving state in response to an exit component adjustment instruction.

According to another aspect of the present disclosure, there is provided a processing apparatus of a page component, including: a first setting unit configured to set a first component in the target page to a moving state in response to the component adjustment instruction; a first determining unit configured to determine first position information of a second component in the target page, wherein the second component is a component whose state in the target page is not the moving state; an acquisition unit configured to acquire second position information of the first component after the movement in response to a movement instruction for the first component; a second determination unit configured to determine whether the first component and the second component satisfy an alignment condition based on the first position information and the second position information; an alignment unit configured to perform an alignment operation on the first component and the second component and display an auxiliary line connecting the aligned first component and second component in response to determining that the alignment condition is satisfied; and a second setting unit configured to set the first component to a non-moving state in response to an exit component adjustment instruction.

According to another aspect of the present disclosure, there is provided an electronic device including: at least one processor; and a memory communicatively coupled to the at least one processor; the memory stores instructions executable by the at least one processor to cause the at least one processor to perform the method of the present disclosure.

According to another aspect of the present disclosure, there is provided a non-transitory computer-readable storage medium storing computer instructions for causing a computer to perform the method described in the present disclosure.

According to another aspect of the disclosure, a computer program product is provided, comprising a computer program which, when executed by a processor, implements the method described in the disclosure.

According to one or more embodiments of the present disclosure, whether an alignment condition is satisfied is determined based on position information between components, so that alignment between components can be conveniently and rapidly achieved without causing a slight incrustation in a moving process; and the user is visually prompted through the auxiliary line, so that the operation time in the process of self-defining layout is greatly reduced, and the user experience is improved.

It should be understood that the statements in this section do not necessarily identify key or critical features of the embodiments of the present disclosure, nor do they limit the scope of the present disclosure. Other features of the present disclosure will become apparent from the following description.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate exemplary embodiments of the embodiments and, together with the description, serve to explain the exemplary implementations of the embodiments. The illustrated embodiments are for purposes of illustration only and do not limit the scope of the claims. Throughout the drawings, identical reference numbers designate similar, but not necessarily identical, elements.

FIG. 1 illustrates a schematic diagram of an exemplary system in which various methods described herein may be implemented, according to an embodiment of the present disclosure;

FIG. 2 illustrates a page component diagram of an exemplary embodiment;

FIG. 3 illustrates a flow diagram of a method of processing a page component according to an embodiment of the disclosure;

FIG. 4 illustrates a page component diagram according to an embodiment of the disclosure;

FIG. 5 illustrates a page component diagram according to an embodiment of the disclosure;

6A-6D illustrate schematic diagrams of determining whether an alignment condition is satisfied between components in accordance with embodiments of the present disclosure;

7A-7C illustrate schematic diagrams of determining whether an alignment condition is satisfied between components in accordance with embodiments of the present disclosure;

FIG. 8 shows a schematic diagram of aligning a first component and a second component and displaying an auxiliary line according to an embodiment of the present disclosure;

FIG. 9 shows a block diagram of a processing device of a page component according to an embodiment of the present disclosure; and

FIG. 10 illustrates a block diagram of an exemplary electronic device that can be used to implement embodiments of the present disclosure.

Detailed Description

Exemplary embodiments of the present disclosure are described below with reference to the accompanying drawings, in which various details of embodiments of the present disclosure are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope of the present disclosure. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.

In the present disclosure, unless otherwise specified, the use of the terms "first", "second", etc. to describe various elements is not intended to limit the positional relationship, the timing relationship, or the importance relationship of the elements, and such terms are used only to distinguish one element from another. In some examples, a first element and a second element may refer to the same instance of the element, and in some cases, based on the context, they may also refer to different instances.

The terminology used in the description of the various described examples in this disclosure is for the purpose of describing particular examples only and is not intended to be limiting. Unless the context clearly indicates otherwise, if the number of elements is not specifically limited, the elements may be one or more. Furthermore, the term "and/or" as used in this disclosure is intended to encompass any and all possible combinations of the listed items.

Embodiments of the present disclosure will be described in detail below with reference to the accompanying drawings.

Fig. 1 illustrates a schematic diagram of an exemplary system 100 in which various methods and apparatus described herein may be implemented in accordance with embodiments of the present disclosure. Referring to fig. 1, the system 100 includes one or

more client devices

101, 102, 103, 104, 105, and 106, a server 120, and one or more communication networks 110 coupling the one or more client devices to the server 120.

Client devices

101, 102, 103, 104, 105, and 106 may be configured to execute one or more applications.

In embodiments of the present disclosure, the server 120 may run one or more services or software applications that enable the processing methods of the page components to be performed.

In some embodiments, the server 120 may also provide other services or software applications, which may include non-virtual environments and virtual environments. In certain embodiments, these services may be provided as web-based services or cloud services, for example, provided to users of

client devices

101, 102, 103, 104, 105, and/or 106 under a software as a service (SaaS) model.

In the configuration shown in fig. 1, server 120 may include one or more components that implement the functions performed by server 120. These components may include software components, hardware components, or a combination thereof, which may be executed by one or more processors. A user operating a

client device

101, 102, 103, 104, 105, and/or 106 may, in turn, utilize one or more client applications to interact with the server 120 to take advantage of the services provided by these components. It should be understood that a variety of different system configurations are possible, which may differ from system 100. Accordingly, fig. 1 is one example of a system for implementing the various methods described herein and is not intended to be limiting.

A user may move components using

client devices

101, 102, 103, 104, 105, and/or 106. The client device may provide an interface that enables a user of the client device to interact with the client device. The client device may also output information to the user via the interface. Although fig. 1 depicts only six client devices, those skilled in the art will appreciate that any number of client devices may be supported by the present disclosure.

Client devices

101, 102, 103, 104, 105, and/or 106 may include various types of computer devices, such as portable handheld devices, general purpose computers (such as personal computers and laptops), workstation computers, wearable devices, smart screen devices, self-service terminal devices, service robots, gaming systems, thin clients, various messaging devices, sensors or other sensing devices, and so forth. These computer devices may run various types and versions of software applications and operating systems, such as MICROSOFT Windows, APPLE iOS, UNIX-like operating systems, linux, or Linux-like operating systems (e.g., GOOGLE Chrome OS); or include various Mobile operating systems such as MICROSOFT Windows Mobile OS, iOS, windows Phone, android. Portable handheld devices may include cellular telephones, smart phones, tablets, personal Digital Assistants (PDAs), and the like. Wearable devices may include head-mounted displays (such as smart glasses) and other devices. The gaming system may include a variety of handheld gaming devices, internet-enabled gaming devices, and the like. The client device is capable of executing a variety of different applications, such as various Internet-related applications, communication applications (e.g., email applications), short Message Service (SMS) applications, and may use a variety of communication protocols.

Network 110 may be any type of network known to those skilled in the art that may support data communications using any of a variety of available protocols, including but not limited to TCP/IP, SNA, IPX, etc. Merely by way of example, one or more networks 110 may be a Local Area Network (LAN), an ethernet-based network, a token ring, a Wide Area Network (WAN), the internet, a virtual network, a Virtual Private Network (VPN), an intranet, an extranet, a blockchain network, a Public Switched Telephone Network (PSTN), an infrared network, a wireless network (e.g., bluetooth, WIFI), and/or any combination of these and/or other networks.

The server 120 may include one or more general purpose computers, special purpose server computers (e.g., PC (personal computer) servers, UNIX servers, mid-end servers), blade servers, mainframe computers, server clusters, or any other suitable arrangement and/or combination. The server 120 may include one or more virtual machines running a virtual operating system, or other computing architecture involving virtualization (e.g., one or more flexible pools of logical storage that may be virtualized to maintain virtual storage for the server). In various embodiments, the server 120 may run one or more services or software applications that provide the functionality described below.

The computing units in server 120 may run one or more operating systems including any of the operating systems described above, as well as any commercially available server operating systems. The server 120 may also run any of a variety of additional server applications and/or middle tier applications, including HTTP servers, FTP servers, CGI servers, JAVA servers, database servers, and the like.

In some implementations, the server 120 may include one or more applications to analyze and consolidate data feeds and/or event updates received from users of the

client devices

101, 102, 103, 104, 105, and 106. Server 120 may also include one or more applications to display data feeds and/or real-time events via one or more display devices of

client devices

101, 102, 103, 104, 105, and 106.

In some embodiments, the server 120 may be a server of a distributed system, or a server incorporating a blockchain. The server 120 may also be a cloud server, or a smart cloud computing server or a smart cloud host with artificial intelligence technology. The cloud Server is a host product in a cloud computing service system, and is used for solving the defects of high management difficulty and weak service expansibility in the traditional physical host and Virtual Private Server (VPS) service.

The system 100 may also include one or more databases 130. In some embodiments, these databases may be used to store data and other information. For example, one or more of the databases 130 may be used to store information such as page components, location information. The database 130 may reside in various locations. For example, the database used by the server 120 may be local to the server 120, or may be remote from the server 120 and may communicate with the server 120 via a network-based or dedicated connection. The database 130 may be of different types. In certain embodiments, the database used by the server 120 may be, for example, a relational database. One or more of these databases may store, update, and retrieve data to and from the databases in response to the commands.

In some embodiments, one or more of the databases 130 may also be used by applications to store application data. The databases used by the application may be different types of databases, such as key-value stores, object stores, or regular stores supported by a file system.

The system 100 of fig. 1 may be configured and operated in various ways to enable application of the various methods and apparatus described in accordance with the present disclosure.

With the development of science and technology, the functions of the application programs are more and more abundant, and more convenience is provided for the life of people. For example, the quality and the beauty of the advertisement landing page directly influence the real experience of the netizens in opening the advertisement landing page, and indirectly influence the conversion and consumption of customers. Meanwhile, the operating experience fluency of the station building editor is an important link which directly influences the user experience.

Typically, when component movement is performed in a site editor, a user can operate the component movement via a keyboard, for example, 1 pixel per key, while verifying alignment between components in cooperation with the naked eye. However, if the two components differ by 0.5 pixels in the end, then a perfect alignment of the two components will not be achieved and the alignment efficiency is slow. Even if the pixel for each key movement is changed to 0.5 pixel, there will be a case where the two components differ by 0.1 pixel. As the number of pixels moved by the key is gradually reduced, not only the extreme scenes cannot be solved, but also the same pixel distance is caused, and the number of times of pressing the key by the user is greatly increased.

Alternatively, when the moving component is within a fixed range from a component, the corresponding border of the moving component is highlighted to indicate to the user that the two components are about to align. As shown in FIG. 2, component 201 is a mobile component,

components

202 and 203 are non-mobile components, the top edge of component 201 has been fully aligned with the bottom edge of component 202 and the top edge of component 203, but the only components with highlighted borders are components 201 and 203 (i.e., edges 201a and 203 a), and the bottom border of component 202 is not highlighted regardless of how component 201 is moved, even though

components

201 and 202 are already aligned. Therefore, if a plurality of components with similar positions in a fixed range need to be aligned one by one in the editing interface, it is not clear to the user which component meets the requirement that the side frame highlight corresponding to the dragged component is aligned with.

Therefore, according to an embodiment of the present disclosure, there is provided a method for processing a page component, including: setting a first component in the target page to a moving state in response to the component adjustment instruction; determining first position information of a second assembly in the target page, wherein the second assembly is an assembly of which the state in the target page is not a moving state; responding to a moving instruction aiming at the first assembly, and acquiring second position information of the moved first assembly; determining whether the first component and the second component satisfy an alignment condition based on the first position information and the second position information; in response to determining that the alignment condition is met, performing an alignment operation on the first component and the second component and displaying an auxiliary line, wherein the auxiliary line connects the aligned first component and the aligned second component; and setting the first component to a non-moving state in response to the exit component adjustment instruction.

According to the embodiment of the disclosure, whether the alignment condition is met is judged based on the position information between the assemblies, so that the alignment between the assemblies can be conveniently and quickly realized, and the phenomenon that the assemblies are slightly clamped in the moving process is avoided; and the user is visually prompted through the auxiliary line, so that the operation time in the user-defined layout is greatly reduced, and the user experience is improved.

FIG. 3 shows a flowchart of a method of processing a page component according to an embodiment of the present disclosure. As shown in FIG. 3, in step 310, a first component in the target page is set to a move state in response to the component adjustment instruction.

Specifically, the target page may be a graphical programming page of the client, and the user may edit and operate components in the page through a user interface of the client. When a currently displayed page of an application program client is a target page and a component adjusting instruction initiated by a user is received, detecting the state of at least one component in the target page, wherein the state of the component comprises a moving state and a non-moving state, the moving state represents that the component can be moved currently based on the moving instruction, and the non-moving state represents that the component cannot be moved currently based on the moving instruction.

In some examples, the component adjustment instruction may be triggered by selecting a component in the target page to set the component to a mobile state, e.g., the user selects or clicks the component with a cursor; or, the method can be triggered by pressing a preset time length on a component in the target page by the user; or, the component adjustment instruction may also be triggered in a voice manner, for example, when the application client receives a voice of "adjusting the component layout" input by the user when the target page is displayed, the component adjustment instruction may also be triggered; the component adjustment instruction can also be triggered in other ways, and in practical application, the setting can be performed according to actual requirements, which is not limited herein.

According to some embodiments, after setting the first component to the mobile state, the first component may be characterized by the first rectangular area. The edges of the first rectangular area may be parallel to the edges of the target page.

According to some embodiments, the second component whose state is not a moving state may be characterized by the second rectangular area. The edges of the second rectangular area may be parallel to the edges of the target page.

The first assembly and the second assembly are respectively characterized by the corresponding rectangular areas, and the alignment of the first assembly and the second assembly can be conveniently realized by realizing the alignment of the corresponding rectangular areas.

In some examples, the first component and the second component may not be regular shapes. As shown in fig. 4, the assembly 401 is in a quadrangle shape, so the assembly 401 is characterized by a rectangular area 401a to realize the alignment operation between the assembly 401 and other assemblies based on the rectangular area 401 a.

In some embodiments, alignment of the rotated rectangular assembly may be achieved. For example, as shown in fig. 4, the component 402 is a rotated component of an original rectangular component, and the component 402 is characterized by a rectangular area 402a, so as to implement an alignment operation between the rotated component 402 and other components based on the rectangular area 402 a.

According to some embodiments, the first rectangular area is a minimum bounding rectangular area that includes the first component and has an edge parallel to an edge of the target page. Illustratively, with continued reference to FIG. 4,

components

401, 402, and 403 may be characterized by respective circumscribed

rectangular regions

401a, 402a, and 403a, respectively.

It can be understood that, when the first component is itself rectangular and the edge is parallel to the edge of the target page, the area where the first component is located may be the first rectangular area.

According to some embodiments, the first component comprises a plurality of components. The first rectangular area is a minimum circumscribed rectangular area which comprises the plurality of components and has a side parallel to a side of the target page. Illustratively, with continued reference to FIG. 4,

components

404 and 405 are both in a mobile state, and then

components

404 and 405 together form a first component, which may be characterized by respective circumscribed

rectangular areas

401a, 402a, and 403a, respectively. The first component formed by

components

404 and 405 may be characterized by a corresponding circumscribed rectangular area 404 a.

In step 320, first position information of a second component in the target page is determined, wherein the second component is a component of which the state in the target page is not a moving state.

In embodiments where the second components are respectively characterized by the second rectangular areas, the first position information may be position information of the second rectangular areas. According to some embodiments, the first position information may comprise a distance between mutually parallel edges of the second rectangular area and the target page.

Specifically, as shown in FIG. 5, component 501 is characterized by rectangular area 501a and component 502 is characterized by rectangular area 502 a. Therefore, the distance between the sides of the rectangular region 501a and the target page 500 parallel to each other, for example, the distances S1 and S2, that is, the distance between the left side of the rectangular region 501a and the left side of the target page 500, and the distance between the upper side of the rectangular region 501a and the upper side of the target page 500, may be acquired. Of course, it is understood that the distance between the right side of the rectangular area 501a and the left or right side of the target page 500, and the distance between the bottom side of the rectangular area 501a and the upper or bottom side of the target page 500 may also be obtained. Similarly, for component 502, distances S3 and S4 between the rectangular region 502a used to characterize it and the edges of the target page 500 may be obtained.

In some examples, the first location information may include size information of the rectangular area 501a and the rectangular area 502 a. For example, size information, such as length and width, of a rectangular area corresponding to each component may be predetermined.

According to some embodiments, the second component may comprise the target page, thereby enabling alignment operations of other components within the target page with the target page. At this time, the position information of the second component (i.e., the target page) is the size information of the target page, i.e., the length and width of the target page.

In step 330, second position information of the moved first component is acquired in response to the movement instruction for the first component.

In an embodiment where the first components are respectively characterized by the first rectangular areas, the second position information may be position information of the first rectangular areas. According to some embodiments, the second position information may include a distance between mutually parallel edges of the first rectangular area and the target page.

In some examples, the second location information may also include size information for characterizing a rectangular area of the first component. For example, size information, such as length and width, of a rectangular area corresponding to each component may be predetermined.

According to some embodiments, the movement instructions may include, but are not limited to: key operation and drag operation.

In the embodiment of the present disclosure, after the components in the target page are divided into the static component (i.e., the second component, whose state is the non-moving state) and the moving component (i.e., the first component, whose state is the moving state), the position information of the static component may be obtained only once, so as to save the amount of calculation; and position information of the moving component is acquired once the moving component is moved.

Specifically, after the first component is set to the moving state, the position information of the second component may be acquired once and stored, so that the position information of the first component and the position information of the second component may be calculated after the first component is moved each time. Alternatively, after the first component is moved once based on the movement instruction, the position information of the second component may be acquired and stored once, and the position information of the moved first component may be acquired at the same time.

Generally, each time a first component moves, the calculation and comparison of position information with a second component in the target page is required to determine whether the alignment condition is satisfied. If the first component moves once, the position information of all components in the target page is obtained once, which results in a great increase in computational complexity. In the embodiment of the present disclosure, the position information of the second component only needs to be acquired once during the process of moving the first component. For example, 10 components are included in the target page, and when one component is moved 10 times, the number of times of acquiring the component position information is reduced from the previous 100 calculations to 11. Therefore, the amount of calculation will be much less.

In step 340, it is determined whether the first component and the second component satisfy the alignment condition based on the first position information and the second position information.

According to some embodiments, determining whether the first component and the second component satisfy the alignment condition comprises at least one of: determining that the first component and the second component satisfy an alignment condition in response to determining that a distance between a first straight line and a second straight line is less than a preset threshold, wherein the first straight line is a straight line on which any one side of the first rectangular region extending in the horizontal direction is located or a straight line extending in the horizontal direction passing through a center point of the first rectangular region, and the second straight line is a straight line on which any one side of the second rectangular region extending in the horizontal direction is located or a straight line extending in the horizontal direction passing through a center point of the second rectangular region; and determining that the first assembly and the second assembly satisfy an alignment condition in response to determining that a distance between a third straight line and a fourth straight line is less than a preset threshold, wherein the third straight line is a straight line on which any one side of the first rectangular region extending in the vertical direction is located or a straight line extending in the vertical direction passing through a center point of the first rectangular region, and the fourth straight line is a straight line on which any one side of the second rectangular region extending in the vertical direction is located or a straight line extending in the vertical direction passing through a center point of the second rectangular region.

For example, a distance threshold value, for example, 2 pixels, which can be aligned may be preset, and when the distance between the first straight line and the second straight line or the distance between the third straight line and the fourth straight line satisfies the preset threshold value, the first component is automatically sucked to the second component so that the first straight line is aligned with the second straight line or the third straight line is aligned with the fourth straight line. Through the automatic adsorption (automatic alignment) function within the preset threshold range, the alignment among the components can be conveniently and quickly realized, the components do not need to be checked by naked eyes and dragged for multiple times to realize the alignment, so that the experience of building the station by a user is optimized, and the efficiency of building the station by the user is improved.

It is to be understood that, in the present disclosure, "alignment" means alignment in a direction satisfying an alignment condition, and no displacement occurs in a direction perpendicular to the direction (i.e., a direction not satisfying the alignment condition).

Fig. 6A-6D illustrate schematic diagrams of determining whether an alignment condition is satisfied between components according to an embodiment of the disclosure. As shown in FIG. 6A, the target page 600 includes a component 601 and a component 602, wherein the component 601 is a mobile component (i.e., a first component) and the component 602 is a static component (i.e., a second component). Since the

components

601 and 602 are rectangular, the area of each component is the corresponding rectangular area. During movement of the component 601, the upper edge of the component 601 may be aligned with any one of the horizontally extending sides of the component 602 and a horizontally extending straight line passing through the center point of the component 602. As shown in FIG. 6A, component 601 is aligned with component 602 on the horizontal extension of line 601a, component 601 'is aligned with component 602' on the horizontal extension of line 601a ', and component 601' is aligned with component 602 'on the horizontal extension of line 601 a'.

Of course, it will be understood that the lower edge of the component 601 may also be aligned with any one of the horizontally extending sides of the component 602 and a horizontally extending straight line passing through the center point of the component 602; and a line extending in the horizontal direction through the center point of the component 601 may also be aligned with any one of the sides extending in the horizontal direction of the component 602 and a line extending in the horizontal direction through the center point of the component 602, as shown in fig. 6B, and will not be described herein again.

As shown in FIG. 6C, the object page 600 includes a component 601 and a component 602, wherein the component 601 is a mobile component (i.e., a first component) and the component 602 is a static component (i.e., a second component). Since the

components

601 and 602 are rectangular, the area of each component is the corresponding rectangular area. During movement of the component 601, the left edge of the component 601 may be aligned with any one of the sides of the component 602 extending in the vertical direction and a straight line extending in the vertical direction passing through the center point of the component 602. As shown in fig. 6C, component 601 is aligned with component 602 on the vertical extension of line 601a, component 601' is aligned with component 602' on the vertical extension of line 601a ', and component 601 "is aligned with component 602" on the vertical extension of line 601a ".

Of course, it will be understood that the right side edge of the component 601 may also be aligned with any one of the sides of the component 602 extending in the vertical direction and a straight line extending in the vertical direction through the center point of the component 602; and a straight line extending in the vertical direction through the center point of the component 601 may also be aligned with any one of the sides extending in the vertical direction of the component 602 and a straight line extending in the vertical direction through the center point of the component 602, as shown in fig. 6D, and will not be described herein again.

It will be understood that in the present disclosure, the spatially relative terms "horizontal" and "vertical" are used in conjunction with the target page. When the target page (e.g., the canvas area of the site building editor) is oriented correctly with respect to the user for editing, the orientation on the page (or equivalently, the modules in the page) as viewed from the perspective of the user interface, "horizontal" refers to the left-right extension of the target page, and "vertical" refers to the up-down extension of the target page.

According to some embodiments, the second components are at least two, each characterized by a respective second rectangular area. Thus, determining whether the first component and the second component satisfy the alignment condition may include: in response to determining that the distances between the first straight line and the plurality of second straight lines are all smaller than a preset threshold value, determining that the first assembly and a second assembly corresponding to the second straight line with the smallest distance meet an alignment condition; and in response to determining that the distances between the third straight line and the plurality of fourth straight lines are all smaller than a preset threshold value, determining that the first assembly and the second assembly corresponding to the fourth straight line with the smallest distance meet the alignment condition.

7A-7C illustrate schematic diagrams of determining whether an alignment condition is satisfied between components, according to embodiments of the disclosure. Specifically, as shown in FIG. 7A, a component 701, a component 702, and a component 703 are included in the target page 700, wherein the component 701 is a mobile component (i.e., a first component), and the

components

702 and 703 are static components (i.e., a second component). During the move, the left edge of component 701 is at a distance S5 from the right edge of component 702, while the right edge of component 701 is at a distance S6 from the left edge of component 703. If the distances S5 and S6 are both smaller than the preset threshold (i.e., both satisfy the adsorption condition), the component 701 is automatically adsorbed onto the component with the smaller distance. For example, if the distance S5 is less than the distance S6 at this time, the component 701 is automatically sucked horizontally to the left to the component 702 to align with the right edge of the component 702, where the component 701 is not displaced in the vertical direction.

As shown in FIG. 7B, during the move, the left edge of component 701 is at a distance S5 from the right edge of component 702, while the left edge of component 701 is at a distance S6 from the left edge of component 703. If the distances S5 and S6 are both smaller than the preset threshold (i.e., both satisfy the adsorption condition), the component 701 is automatically adsorbed onto the component with the smaller distance. For example, if the distance S5 is less than the distance S6 at this time, the component 701 is automatically sucked horizontally to the left to the component 702 to align with the right edge of the component 702.

As described above, the second component may include the target page itself. Thus, as shown in fig. 7C, during the movement, the distance from the left edge of the component 701 to the right edge of the component 702 is S5, while the distance from the left edge of the component 701 to the center line in the vertical direction of the target page 700 is S6. If the distances S5 and S6 are both smaller than the preset threshold (i.e., both satisfy the adsorption condition), the component 701 is automatically adsorbed onto the component with the smaller distance. For example, if the distance S5 is less than the distance S6 at this time, the component 701 is automatically sucked horizontally to the left to the component 702 to align with the right edge of the component 702; if the distance S6 is less than the distance S5 at this time, the component 701 is automatically sucked horizontally to the right to align with the centerline of the target page 700.

It is understood that other situations where multiple (two or more) alignment conditions are satisfied are similar to those described above with respect to fig. 7A-7C and will not be described again.

According to some embodiments, the second components are at least two, each characterized by a respective second rectangular area. Determining whether the first component and the second component satisfy an alignment condition comprises at least one of: in response to determining that at least two second straight lines are located on both sides of a first straight line, and that distances between the first straight line and the at least two second straight lines are equal and are both less than a preset threshold, determining that the first assembly and the at least two second assemblies do not satisfy an alignment condition; and in response to determining that at least two fourth straight lines are located on both sides of a third straight line, and that the distances between the third straight line and the at least two fourth straight lines are equal and are both less than a preset threshold, determining that the first assembly and the at least two second assemblies do not satisfy an alignment condition.

With continued reference to fig. 7A-7C, if the distance S5 is equal to the distance S6 (and the distance S5 and the distance S6 are in opposite directions, i.e., the straight lines corresponding to the

components

702 and 703 are on opposite sides of the straight line corresponding to the component 701), then the arrangement is such that the component 701 is not automatically sucked to the left and right at this time, i.e., the alignment condition is not satisfied.

In step 350, in response to determining that the alignment condition is satisfied, the first component and the second component are subjected to an alignment operation and an auxiliary line is displayed, wherein the auxiliary line connects the aligned first component and the aligned second component.

Fig. 8 illustrates a schematic diagram of aligning a first component and a second component and displaying an auxiliary line according to an embodiment of the present disclosure. As shown in FIG. 8, after the upper edge of the component 801 (the first component, i.e., the moving component) moves to align with the corresponding edges of the components 802 and 803 (the second component, i.e., the static component), an auxiliary line 801a is displayed to visually display to the user which edge of which component the component 801 is currently aligned with, optimizing interaction details.

In some embodiments, the auxiliary line connects the aligned first and second components, i.e. from the currently aligned edge of the first component (or a line segment passing through the center point of the first component) to the currently aligned edge of the second component (or a line segment passing through the center point of the second component), as shown in fig. 8.

In step 360, the first component is set to a non-moving state in response to the exit component adjustment instruction.

Specifically, when the application client receives a user-initiated exit component adjustment instruction, the first component may be set to the non-mobile state.

In some embodiments, the application client sets a first component in a target page of the application client to a moving state in response to the component adjustment instruction, then determines whether the first component meets an alignment condition in response to the movement instruction for the first component, and implements automatic alignment between the components and generates and displays a corresponding auxiliary line when the alignment condition is met, until the movement instruction stops, and then sets the first component to a non-moving state in response to exiting the component adjustment instruction. For example, the exit component adjustment instruction may be an operation that the first component is no longer selected by the cursor, the mouse is lifted, or the like.

Therefore, when a user performs custom layout on the components in the target page of the application program client, alignment among the components can be conveniently and quickly realized, and the components cannot be slightly jammed in the moving process; and the user is visually prompted through the auxiliary line, so that the operation time in the user-defined layout is greatly reduced, and the user experience is improved.

It will be understood that in the present disclosure, it is not required that the described steps or operations be performed in the particular order described, nor that all of the described steps or operations be performed to achieve desirable results. For example, after the second position information of the moved first component is acquired in response to the movement instruction for the first component, the first position information of the second component in the target page may be further determined.

According to some embodiments, the second rectangular area is a minimum bounding rectangular area that includes the second component and whose edges are parallel to edges of the target page.

In some examples, the second component may also be an irregular shape or a rotated component, and alignment between different components may be conveniently achieved by defining a corresponding second rectangular area.

According to some embodiments, the second component comprises a plurality of components. The second rectangular area is a minimum circumscribed rectangular area which comprises the plurality of components and has a side parallel to a side of the target page.

According to some embodiments, the method according to the present disclosure may further comprise: in response to the exit component adjustment instruction, the auxiliary line is no longer displayed. For example, the exit component adjustment instruction may be an operation that the first component is no longer selected by the cursor, the mouse is lifted, or the like. That is, after aligning the first component with the second component by the disclosed method, the auxiliary line is displayed to prompt the user that the current components are aligned. When the user exits the component adjustment command (e.g., mouse up), it is stated that no further action is currently required on the first component, and therefore the auxiliary line is no longer displayed upon exiting the component adjustment command.

According to an embodiment of the present disclosure, as shown in fig. 9, there is also provided a processing apparatus 900 of a page component, including: a first setting unit 910 configured to set a first component in the target page to a moving state in response to the component adjustment instruction; a first determining unit 920, configured to determine first position information of a second component in the target page, where the second component is a component whose state in the target page is not the moving state; an obtaining unit 930 configured to obtain second position information of the first component after the movement in response to the movement instruction for the first component; a second determining unit 940 configured to determine whether the first component and the second component satisfy an alignment condition based on the first position information and the second position information; an alignment unit 950 configured to perform an alignment operation on the first component and the second component and display an auxiliary line connecting the aligned first component and second component in response to determining that the alignment condition is satisfied; and a second setting unit 960 configured to set the first component to a non-moving state in response to the exit component adjustment instruction.

Here, the operations of the above units 910 to 960 of the page component processing apparatus 900 are similar to the operations of the steps 310 to 360 described above, and are not described herein again.

According to an embodiment of the present disclosure, there is also provided an electronic device, a readable storage medium, and a computer program product.

Referring to fig. 10, a block diagram of a structure of an electronic device 1000, which may be a server or a client of the present disclosure, which is an example of a hardware device that may be applied to aspects of the present disclosure, will now be described. Electronic device is intended to represent various forms of digital electronic computer devices, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be examples only, and are not meant to limit implementations of the disclosure described and/or claimed herein.

As shown in fig. 10, the electronic device 1000 includes a computing unit 1001 that can perform various appropriate actions and processes according to a computer program stored in a Read Only Memory (ROM) 1002 or a computer program loaded from a storage unit 1008 into a Random Access Memory (RAM) 1003. In the RAM 1003, various programs and data necessary for the operation of the electronic apparatus 1000 can be stored. The calculation unit 1001, the ROM 1002, and the RAM 1003 are connected to each other by a bus 1004. An input/output (I/O) interface 1005 is also connected to bus 1004.

A number of components in the electronic device 1000 are connected to the I/O interface 1005, including: input section 1006, output section 1007, storage section 1008, and communication section 1009. The input unit 1006 may be any type of device capable of inputting information to the electronic device 1000, and the input unit 1006 may receive input numeric or character information and generate key signal inputs related to user settings and/or function controls of the electronic device, and may include, but is not limited to, a mouse, a keyboard, a touch screen, a track pad, a track ball, a joystick, a microphone, and/or a remote controller. Output unit 1007 may be any type of device capable of presenting information and may include, but is not limited to, a display, speakers, a video/audio output terminal, a vibrator, and/or a printer. The storage unit 1008 may include, but is not limited to, a magnetic disk, an optical disk. The communication unit 1009 allows the electronic device 1000 to exchange information/data with other devices via a computer network, such as the internet, and/or various telecommunications networks, and may include, but is not limited to, modems, network cards, infrared communication devices, wireless communication transceivers, and/or chipsets, such as bluetooth (TM) devices, 802.11 devices, wiFi devices, wiMax devices, cellular communication devices, and/or the like.

Computing unit 1001 may be a variety of general and/or special purpose processing components with processing and computing capabilities. Some examples of the computing unit 1001 include, but are not limited to, a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), various dedicated Artificial Intelligence (AI) computing chips, various computing units running machine learning model algorithms, a Digital Signal Processor (DSP), and any suitable processor, controller, microcontroller, and so forth. The computing unit 1001 performs the various methods and processes described above, such as the method 300. For example, in some embodiments, the method 300 may be implemented as a computer software program tangibly embodied in a machine-readable medium, such as the storage unit 1008. In some embodiments, part or all of the computer program may be loaded and/or installed onto electronic device 1000 via ROM 1002 and/or communications unit 1009. When the computer program is loaded into RAM 1003 and executed by computing unit 1001, one or more steps of method 300 described above may be performed. Alternatively, in other embodiments, the computing unit 1001 may be configured to perform the method 300 in any other suitable manner (e.g., by way of firmware).

Various implementations of the systems and techniques described here above may be implemented in digital electronic circuitry, integrated circuitry, field Programmable Gate Arrays (FPGAs), application Specific Integrated Circuits (ASICs), application Specific Standard Products (ASSPs), system on a chip (SOCs), complex Programmable Logic Devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs that are executable and/or interpretable on a programmable system including at least one programmable processor, which may be special or general purpose, receiving data and instructions from, and transmitting data and instructions to, a storage system, at least one input device, and at least one output device.

Program code for implementing the methods of the present disclosure may be written in any combination of one or more programming languages. These program code may be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus, such that the program code, when executed by the processor or controller, causes the functions/acts specified in the flowchart and/or block diagram to be performed. The program code may execute entirely on the machine, partly on the machine, as a stand-alone software package, partly on the machine and partly on a remote machine or entirely on the remote machine or server.

In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, 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 compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to a user; and a keyboard and a pointing device (e.g., a mouse or a trackball) by which a user can provide input to the computer. Other kinds of devices may also be used to provide for interaction with a user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form, including acoustic, speech, or tactile input.

The systems and techniques described here can be implemented in a computing system that includes a back-end component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such back-end, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local Area Networks (LANs), wide Area Networks (WANs), and the Internet.

The computer system may include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. The server may be a cloud server, a server of a distributed system, or a server with a combined blockchain.

It should be understood that various forms of the flows shown above may be used, with steps reordered, added, or deleted. For example, the steps described in the present disclosure may be performed in parallel, sequentially or in different orders, and are not limited herein as long as the desired results of the technical solutions disclosed in the present disclosure can be achieved.

Although embodiments or examples of the present disclosure have been described with reference to the accompanying drawings, it is to be understood that the above-described methods, systems and apparatus are merely exemplary embodiments or examples and that the scope of the present invention is not limited by these embodiments or examples, but only by the claims as issued and their equivalents. Various elements in the embodiments or examples may be omitted or may be replaced with equivalents thereof. Further, the steps may be performed in an order different from that described in the present disclosure. Further, the various elements in the embodiments or examples may be combined in various ways. It is important that as technology evolves, many of the elements described herein may be replaced with equivalent elements that appear after the present disclosure.

Claims

1. A method for processing page components comprises the following steps:

setting a first component in a target page to be in a moving state in response to a component adjustment instruction, wherein the first component is characterized by a first rectangular area, and the edge of the first rectangular area is parallel to the edge of the target page;

determining first position information of a second component in the target page, wherein the second component is a component of which the state in the target page is not the moving state, wherein the second component is characterized by a second rectangular area, and wherein an edge of the second rectangular area is parallel to an edge of the target page, and the first position information is position information of the second rectangular area;

responding to a movement instruction for the first assembly, and acquiring second position information of the first assembly after movement, wherein the second position information is position information of the first rectangular area;

determining, based on the first and second location information, whether the first and second components satisfy an alignment condition, the determining whether the first and second components satisfy an alignment condition comprising at least one of:

determining that the first component and the second component satisfy an alignment condition in response to determining that a distance between a first straight line and a second straight line is less than a preset threshold, wherein the first straight line is a straight line on which any one side of the first rectangular region extending in a horizontal direction is located or a straight line passing through a center point of the first rectangular region and extending in the horizontal direction, and the second straight line is a straight line on which any one side of the second rectangular region extending in the horizontal direction is located or a straight line passing through a center point of the second rectangular region and extending in the horizontal direction; and

determining that the first assembly and the second assembly satisfy an alignment condition in response to determining that a distance between a third straight line and a fourth straight line is less than a preset threshold, wherein the third straight line is a straight line in which any one side of the first rectangular region extends in a vertical direction or a straight line extending in the vertical direction through a center point of the first rectangular region, and the fourth straight line is a straight line in which any one side of the second rectangular region extends in the vertical direction or a straight line extending in the vertical direction through a center point of the second rectangular region;

in response to determining that the alignment condition is satisfied, performing an alignment operation on the first component and the second component and displaying an auxiliary line, wherein the auxiliary line connects the aligned first component and the aligned second component; and

setting the first component to a non-moving state in response to an exit component adjustment instruction.

2. The method of claim 1, wherein the first position information comprises a distance between the second rectangular area and mutually parallel edges of the target page, and the second position information comprises a distance between the first rectangular area and mutually parallel edges of the target page.

3. The method of claim 1, wherein the second components are at least two, each second component being characterized by a respective second rectangular area, and wherein,

the determining whether the first component and the second component satisfy an alignment condition comprises at least one of:

in response to determining that the distances between the first straight line and the second straight lines are smaller than a preset threshold value, determining that the first assembly and a second assembly corresponding to the second straight line with the smallest distance meet an alignment condition; and

in response to determining that the distances between the third straight line and the plurality of fourth straight lines are all smaller than a preset threshold value, determining that the first assembly and the second assembly corresponding to the fourth straight line with the smallest distance meet the alignment condition.

4. The method of claim 3, wherein there are at least two of the second components, each second component characterized by a respective second rectangular area, and wherein,

in response to determining that at least two second straight lines are located on both sides of a first straight line, and that distances between the first straight line and the at least two second straight lines are equal and are both less than a preset threshold, determining that the first assembly and the at least two second assemblies do not satisfy an alignment condition; and

in response to determining that at least two fourth straight lines are located on both sides of a third straight line, and that the distances between the third straight line and the at least two fourth straight lines are equal and are both less than a preset threshold, determining that the first assembly and the at least two second assemblies do not satisfy an alignment condition.

5. The method of claim 1 or 2, wherein the first rectangular area is a minimum bounding rectangular area that includes the first component and has an edge parallel to an edge of the target page.

6. The method of claim 5, wherein the first component comprises a plurality of components, and wherein the first rectangular area is a minimum bounding rectangular area comprising the plurality of components and having an edge of the first rectangular area parallel to an edge of the target page.

7. The method of claim 1 or 2, wherein the second rectangular area is a minimum bounding rectangular area that includes the second component and whose edges are parallel to edges of the target page.

8. The method of claim 7, wherein the second component comprises a plurality of components, and wherein the second rectangular area is a minimum bounding rectangular area comprising the plurality of components and having an edge parallel to an edge of the target page.

9. The method of claim 1, wherein the second component comprises the target page.

10. The method of claim 1, further comprising: in response to the exit component adjustment instruction, the auxiliary line is no longer displayed.

11. The method of claim 1, wherein the movement instruction comprises at least one of: key operation and drag operation.

12. A processing apparatus for page components, comprising:

a first setting unit configured to set a first component in a target page to a moving state in response to a component adjustment instruction, wherein the first component is characterized by a first rectangular area, and an edge of the first rectangular area is parallel to an edge of the target page;

a first determining unit configured to determine first position information of a second component in the target page, wherein the second component is a component whose state in the target page is not the moving state, wherein the second component is characterized by a second rectangular area, and wherein an edge of the second rectangular area is parallel to an edge of the target page, and the first position information is position information of the second rectangular area;

an acquisition unit configured to acquire second position information of the first component after the movement in response to a movement instruction for the first component, the second position information being position information of the first rectangular area;

a second determination unit configured to determine whether the first component and the second component satisfy an alignment condition based on the first position information and the second position information, the second determination unit configured to perform at least one of:

an alignment unit configured to perform an alignment operation on the first component and the second component and display an auxiliary line connecting the aligned first component and second component in response to determining that the alignment condition is satisfied; and

a second setting unit configured to set the first component to a non-moving state in response to an exit component adjustment instruction.

13. The apparatus of claim 12, wherein the first location information comprises a distance between the second rectangular area and mutually parallel edges of the target page, and the second location information comprises a distance between the first rectangular area and mutually parallel edges of the target page.

14. The apparatus of claim 12, wherein the second components are at least two, each second component being characterized by a respective second rectangular area, and wherein,

the second determination unit is configured to perform at least one of:

in response to determining that the distances between the third straight line and the plurality of fourth straight lines are all smaller than a preset threshold value, determining that the first component and the second component corresponding to the fourth straight line with the smallest distance meet the alignment condition.

15. The apparatus of claim 14, wherein the second components are at least two, each second component characterized by a respective second rectangular area, and wherein,

the second determination unit is configured to perform at least one of:

16. The apparatus of claim 12 or 13, wherein the first rectangular area is a minimum bounding rectangular area that includes the first component and has an edge parallel to an edge of the target page.

17. The apparatus of claim 16, wherein the first component comprises a plurality of components, and wherein the first rectangular area is a minimum bounding rectangular area comprising the plurality of components and having an edge of the first rectangular area parallel to an edge of the target page.

18. An electronic device, comprising:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein

The memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-11.

19. A non-transitory computer readable storage medium having stored thereon computer instructions for causing the computer to perform the method of any one of claims 1-11.