CN116991529A

CN116991529A - Method, device, equipment and storage medium for adjusting component margin

Info

Publication number: CN116991529A
Application number: CN202311110101.XA
Authority: CN
Inventors: 孟轩竹
Original assignee: Beijing Zitiao Network Technology Co Ltd
Current assignee: Beijing Zitiao Network Technology Co Ltd
Priority date: 2023-08-30
Filing date: 2023-08-30
Publication date: 2023-11-03

Abstract

The application discloses a method, a device, equipment and a storage medium for adjusting component edge distance, wherein the method comprises the following steps: in response to a triggering operation for the target component, a margin adjuster of the target component is displayed, by which the inner margin and the outer margin of the target component are adjusted. When the first region of the margin adjuster is activated, a plurality of active margin adjustment regions of the margin adjustment region are controlled to be in an editable state. In response to an operation to activate the second region of the margin adjuster, a plurality of active margin adjustment regions of the margin adjustment region are controlled to be in an editable state. That is, when the user activates a specific area of the margin adjuster, the entire inner margin adjusting area of the target assembly can be adjusted at the same time, or the entire outer margin adjusting area of the target assembly can be adjusted at the same time, without the need of the user to select each margin adjusting area one by one for adjustment, the number of times of the user to adjust the margin is reduced, the mode of the user to adjust the margin of the assembly is improved, and the user experience is improved.

Description

Method, device, equipment and storage medium for adjusting component margin

Technical Field

The present application relates to the field of computer technologies, and in particular, to a method, an apparatus, a device, and a storage medium for adjusting a component margin.

Background

In page design, in order to make the layout of each component, element and text in the page clear, the user has better look and feel when using the page, and proper intervals are required to be set for each component, including the internal and external intervals of the component, the intervals among different components, and the like. The space adjustment of each assembly can be divided into an inner space and an outer space, and the space occupied by the assemblies in the page is defined through the arrangement of the inner space and the outer space. Wherein an inner margin (padding) may represent a distance between a content area of a component and a border of the component, and an outer margin (margin) may represent a distance between a border of the component and other components, or a page edge. For example, there are four directional edge distance values for the inner and outer edge distances of the component, namely, upper-inner edge distance, lower-inner edge distance, left-inner edge distance, right-inner edge distance, upper-outer edge distance, lower-outer edge distance, left-outer edge distance, right-outer edge distance, respectively.

At present, when the inner margin and the outer margin of a component are adjusted in a page editor, the adjustment is needed in a 'selection' mode, namely, the specific value of the margin corresponding to each direction is respectively selected, and the adjustment is similar to the size value of a font needed to be selected when the font size is adjusted in a word document. In the actual page design process, the user usually wants to set the edge distance values of the inner edge distances in four directions to be the same value, or set the edge distance values of the outer edge distances in four directions to be the same value, so that the number of times of adjusting the inner edge distance and the outer edge distance is excessive in the current mode of selecting the edge distance values in each direction, the operation path length of each time of adjusting the edge distance value by the user is long, the operation of the user is inconvenient, and the use experience of the user is affected.

Disclosure of Invention

In view of the foregoing, the present application provides a method, apparatus, device and storage medium for adjusting component margins, so as to improve the operation mode of adjusting component margins by users and improve user experience.

In order to achieve the above purpose, the technical scheme provided by the application is as follows:

in a first aspect of the application, there is provided a method of adjusting a margin of a component, the method comprising:

in response to a triggering operation for a target component, displaying a margin adjuster for the target component;

controlling a plurality of effective inner margin adjustment regions of an inner margin adjustment region of the margin adjuster to be in an editable state in response to an operation to activate a first region of the margin adjuster;

in response to an operation to activate the second region of the margin adjuster, a plurality of active outer margin adjustment regions of the outer margin adjustment region of the margin adjuster are controlled to be in an editable state.

In one possible implementation, the inner margin adjustment region includes a plurality of effective inner margin adjustment regions and an ineffective inner margin adjustment region, and the plurality of effective inner margin adjustment regions and the ineffective inner margin adjustment region are non-overlapping regions, and if the first region belongs to the ineffective inner margin adjustment region, the controlling the plurality of effective inner margin adjustment regions of the inner margin adjustment region of the margin adjuster in an editable state in response to an operation of activating the first region of the margin adjuster includes:

And controlling the plurality of effective margin adjustment areas to be in an editable state in response to an operation to activate the ineffective margin adjustment area.

In one possible implementation, the outer margin adjustment region includes a plurality of effective outer margin adjustment regions and an ineffective outer margin adjustment region, and the plurality of effective outer margin adjustment regions and the ineffective outer margin adjustment region are non-overlapping regions, and if the second region belongs to the ineffective outer margin adjustment region, the controlling the plurality of effective inner margin adjustment regions of the outer margin adjustment region of the margin adjuster to be in an editable state in response to an operation of activating the second region of the margin adjuster includes:

and controlling the plurality of effective outer margin adjustment areas to be in an editable state in response to an operation of activating the ineffective outer margin adjustment area.

In one possible implementation, the method further includes:

in response to an operation to activate any one of the plurality of effective margin adjustment regions, the activated effective margin adjustment region is controlled to be in an editable state.

In one possible implementation, the method further includes:

In response to an operation to activate any one of the plurality of effective outer margin adjustment regions, the activated effective outer margin adjustment region is controlled to be in an editable state.

In one possible implementation, the method further includes:

when the effective inner margin adjusting area is in an editable state, the inner margin is adjusted by inputting an inner margin absolute value or an inner margin relative value corresponding to the effective inner margin adjusting area.

In one possible implementation, the method further includes:

when the effective outer margin adjusting area is in an editable state, the outer margin is adjusted by inputting an outer margin absolute value or an outer margin relative value corresponding to the effective outer margin adjusting area.

In one possible implementation, the controlling the activated effective inner margin adjustment area to be in an editable state in response to an operation to activate any one of the plurality of effective inner margin adjustment areas includes:

and in response to an operation of activating the effective inner margin adjustment region, displaying a selectable item editing control of the effective inner margin in the effective inner margin adjustment region.

In one possible implementation, the method further includes:

and controlling the plurality of effective inner margin adjustment areas to be highlighted in response to an operation of controlling the mouse to hover over the ineffective inner margin adjustment areas.

In one possible implementation, the method further includes:

and controlling the plurality of effective outer edge distance adjustment areas to be highlighted in response to an operation of controlling the mouse to hover over the ineffective outer edge distance adjustment areas.

In one possible implementation, the method further includes:

and controlling the effective inner margin adjustment area to be highlighted in response to controlling the operation of hovering the mouse over the effective inner margin adjustment area.

In one possible implementation, the method further includes:

and controlling the effective outer edge distance adjusting area to be highlighted in response to the operation of controlling the mouse to hover over the effective outer edge distance adjusting area.

In one possible implementation, the plurality of effective inner margin adjustment regions includes a first inner margin adjustment region, a second inner margin adjustment region, a third inner margin adjustment region, a fourth inner margin adjustment region, and the controlling the plurality of effective inner margin adjustment regions to be in an editable state in response to an operation to activate the inactive inner margin adjustment region includes:

And controlling the first inner margin adjusting region, the second inner margin adjusting region, the third inner margin adjusting region and the fourth inner margin adjusting region to be in an editable state in response to an operation of activating the invalid inner margin adjusting region.

In one possible implementation, the plurality of effective outer margin adjustment regions includes a first outer margin adjustment region, a second outer margin adjustment region, a third outer margin adjustment region, a fourth outer margin adjustment region, and the controlling the plurality of effective outer margin adjustment regions to be in an editable state in response to an operation to activate the inactive outer margin adjustment region includes:

and controlling the first outer margin adjusting region, the second outer margin adjusting region, the third outer margin adjusting region and the fourth outer margin adjusting region to be in an editable state in response to an operation of activating the inactive outer margin adjusting region.

In a second aspect of the present application, there is provided an apparatus for adjusting the margin of a component, the apparatus comprising:

a display unit for displaying an edge distance adjuster of a target component in response to a trigger operation for the target component;

A first control unit configured to control a plurality of effective inner margin adjustment regions of an inner margin adjustment region of the margin adjuster to be in an editable state in response to an operation to activate a first region of the margin adjuster;

and a second control unit for controlling a plurality of effective outer margin adjustment regions of the outer margin adjustment region of the margin adjuster to be in an editable state in response to an operation to activate the second region of the margin adjuster.

In a third aspect of the application, there is provided an electronic device, the device comprising: a processor and a memory;

the memory is used for storing instructions or computer programs;

the processor is configured to execute the instructions or the computer program in the memory, so that the electronic device performs the method described in the first aspect.

In a fourth aspect of the application, there is provided a computer readable storage medium having instructions stored therein which, when run on a device, cause the device to perform the method of the first aspect described above.

In a fifth aspect of the application, there is provided a computer program product comprising computer programs/instructions which when executed by a processor implement the method of the first aspect.

From this, the application has the following beneficial effects:

in the above-described implementation of the present application, in response to a trigger operation for a target component, a margin adjuster of the target component is displayed, by which the inner margin and the outer margin of the target component can be adjusted. When the first region of the margin adjuster is activated, a plurality of effective margin adjustment regions of the margin adjuster's margin adjustment region may be controlled to be in an editable state. In response to an operation to activate the second region of the margin adjuster, a plurality of active margin adjustment regions of the margin adjustment region of the margin adjuster are controlled to be in an editable state. According to the method provided by the application, when a user activates a specific area of the edge margin adjuster, the inner edge margin adjusting area of the target assembly can be adjusted at the same time, or the outer edge margin adjusting area of the target assembly can be adjusted at the same time, the user does not need to activate each edge margin adjusting area one by one to select, the number of times of adjusting the edge margin by the user is reduced, the mode of adjusting the edge margin of the assembly by the user is improved, and the user experience is improved.

Drawings

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings that are required to be used in the embodiments or the description of the prior art will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments described in the present application, and other drawings may be obtained according to the drawings without inventive effort to those skilled in the art.

FIG. 1 is a schematic diagram of a component margin according to an embodiment of the present application;

FIG. 2 is a schematic diagram of an edge distance adjustment assembly according to an embodiment of the present application;

FIG. 3 is a flowchart of a method for adjusting component margins according to an embodiment of the present application;

FIG. 4 is a schematic diagram of a display margin adjuster according to an embodiment of the present application;

FIG. 5 is a schematic diagram of an inner margin adjustment area according to an embodiment of the present application;

FIG. 6 is a schematic diagram of an inner margin adjustment area in an editable state according to an embodiment of the application;

FIG. 7 is a schematic diagram of another embodiment of an inner margin adjustment area in an editable state;

FIG. 8 is a schematic diagram of still another embodiment of an inner margin adjustment area in an editable state;

FIG. 9 is a schematic view of highlighting an inner margin adjustment region according to an embodiment of the present application;

FIG. 10 is a schematic view of another highlighting of an inner margin adjustment area according to an embodiment of the present application;

FIG. 11 is a schematic illustration of highlighting of a further inner margin adjustment area provided by an embodiment of the present application;

FIG. 12 is a schematic view of an outer edge distance adjustment area according to an embodiment of the present application;

FIG. 13 is a schematic diagram of an outer margin adjustment area in an editable state according to an embodiment of the application;

FIG. 14 is a schematic view of another outer margin adjustment area provided in an embodiment of the present application in an editable state;

FIG. 15 is a schematic view showing highlighting of an outer margin adjustment area according to an embodiment of the present application;

FIG. 16 is a schematic view of another highlighting of outer margin adjustment areas provided by an embodiment of the present application;

FIG. 17 is a schematic view of a further outer margin adjustment area highlighting provided by an embodiment of the present application;

FIG. 18 is a schematic view of an apparatus for adjusting component margins according to an embodiment of the present application;

fig. 19 is a schematic structural diagram of an electronic device according to an embodiment of the present application.

Detailed Description

In order to make the present application better understood by those skilled in the art, the following description will clearly and completely describe the technical solutions in the embodiments of the present application with reference to the accompanying drawings, and it is apparent that the described embodiments are only some embodiments of the present application, not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to be within the scope of the application.

In order to facilitate understanding of the technical solution provided by the embodiments of the present application, the following first describes a technical background related to the present application.

The method provided by the embodiment of the application can be applied to an application platform, namely a service (Application Platform as a Service, apaas), wherein the apaas is a cloud computing service model, and a platform is provided for developing, running and managing application programs. When using apaas, the user does not need to perform complicated software deployment, hardware configuration, network setting and other operations, and can concentrate on the development logic of the application program, without spending too much time to deal with the maintenance and management problems of the infrastructure. According to the embodiment of the application, the page design function can be completed through the platform, and the margin of each component in the page is adjusted in the page design through developing program logic.

When the spacing of the components is adjusted in the page design, the spacing adjustment of each component can be divided into an inner spacing and an outer spacing, and the size of the space occupied by the components in the page is defined through the arrangement of the inner spacing and the outer spacing. Referring specifically to fig. 1, a schematic diagram of a component margin according to an embodiment of the present application is shown. Wherein an inner margin (padding) may represent a distance between a content area of a component and a border of the component, and an outer margin (margin) may represent a distance between a border of the component and other components, or a page edge. For example, there are four directional edge distance values for the inner and outer edge distances of the component, namely, upper-inner edge distance, lower-inner edge distance, left-inner edge distance, right-inner edge distance, upper-outer edge distance, lower-outer edge distance, left-outer edge distance, right-outer edge distance, respectively.

At present, when the inner margin and the outer margin of a component are adjusted in a page editor, the adjustment is needed in a 'selection' mode, namely, the specific value of the margin corresponding to each direction is respectively selected, and the adjustment is similar to the size value of a font needed to be selected when the font size is adjusted in a word document. Referring to fig. 2, a schematic diagram of an edge distance adjustment device according to an embodiment of the present application is shown, and according to fig. 2, the edge distances of the device correspond to an upper-edge distance 12px, a lower-edge distance 12px, a left-edge distance 16px, and a right-edge distance 16px, respectively, and the inner edge distances correspond to an upper-inner edge distance 32px, a lower-inner edge distance 24px, a left-inner edge distance 16px, and a right-inner edge distance 16px, respectively. By means of a selection control for selecting a margin in the form of each directional arrow, a specific value for the margin in that direction can be selected.

Since in an actual page design process, the user generally wants to set the margin values of the inner margins of the four directions to the same value, or set the margin values of the outer margins of the four directions to the same value. At present, the mode of selecting the edge distance value of each direction can cause excessive times of adjusting the inner edge distance and the outer edge distance, so that the operation path of each time of adjusting the edge distance value by a user is long, the operation of the user is inconvenient, and the use experience of the user is affected.

Based on the above, the embodiment of the application provides a method for adjusting the margin of a component, so as to improve the operation mode of adjusting the margin of the component by a user and improve the user experience. In particular, in response to a triggering operation for a target component, a margin adjuster of the target component is displayed, by which an inner margin and an outer margin of the target component can be adjusted. When the first region of the margin adjuster is activated, a plurality of effective margin adjustment regions of the margin adjuster's margin adjustment region may be controlled to be in an editable state. In response to an operation to activate the second region of the margin adjuster, a plurality of active margin adjustment regions of the margin adjustment region of the margin adjuster are controlled to be in an editable state. According to the method provided by the application, when a user activates a specific area of the edge margin adjuster, the inner edge margin adjusting area of the target assembly can be adjusted at the same time, or the outer edge margin adjusting area of the target assembly can be adjusted at the same time, the user does not need to activate each edge margin adjusting area one by one to select, the number of times of adjusting the edge margin by the user is reduced, the mode of adjusting the edge margin of the assembly by the user is improved, and the user experience is improved.

In order to facilitate understanding of the technical solution provided by the embodiments of the present application, the following description will be given with reference to the accompanying drawings.

Referring to fig. 3, fig. 3 is a flowchart of a method for adjusting a margin of a component according to an embodiment of the present application.

The method may comprise the steps of:

s301: in response to a triggering operation for the target component, the margin adjuster of the target component is displayed.

When a user wants to adjust the margin of a target component in the page editing process, the margin adjuster for editing the margin of the target component can be displayed by triggering the operation for the target component, and the inner margin and the outer margin of the target component are adjusted by the margin adjuster.

In one possible implementation, when a user clicks on a target component in a page, editing options for the target component may be displayed in the page, e.g., editing options for properties, styles, content, etc. of the target component may be displayed. When the editing options of the style are clicked, the margin adjuster of the target component can be displayed and used for adjusting the inner margin and the outer margin of the target component.

Referring to fig. 4, a schematic diagram of a display margin adjuster according to an embodiment of the present application is shown. The page comprises a component of 'table container-business machine', namely a component in a table form, wherein the content 'Sample text' in the table represents that the table content is only one example, and the content in the table can be edited. When a component "form container-merchant" in a page is selected, editing options for that component are presented on the right side of the page, including attributes, styles, events (content). After selecting the editing options of the style, modules of spacing, position, background, frame, shadow and the like are displayed in the page, and the margin regulator of the component, namely the character-returning margin regulator, is displayed in the modules of the spacing. As can be seen from fig. 4, the 8 values in the margin adjuster correspond to the upper-inner margin 8px, the lower-inner margin 8px, the left-inner margin 8px, the right-inner margin 8px, the upper-outer margin 0px, the lower-outer margin 0px, the left-outer margin 0px, and the right-outer margin 0px of the component.

S302: in response to an operation to activate a first region of the margin adjuster, a plurality of active margin adjustment regions of the margin adjuster's margin adjustment regions are controlled to be in an editable state.

When clicking the first area of the margin adjuster, a plurality of effective inner margin adjusting areas of the margin adjuster can be simultaneously controlled to be in an editable state, so that when a user wants to simultaneously adjust specific values of the inner margin, the user does not need to click values of the inner margin in all directions one by one to adjust. To facilitate an understanding of the implementation of the adjustment assembly inner margin, a description will be given below of specific areas included in the inner margin adjustment area.

In one possible implementation, the inner margin adjustment region may include a plurality of effective inner margin adjustment regions and an ineffective inner margin adjustment region, and the plurality of effective inner margin adjustment regions and the ineffective inner margin adjustment region are non-overlapping regions. In response to a user activating the inactive margin adjustment region, all active margin adjustment regions may be controlled to be in an editable state. For ease of understanding, a specific application scenario will be described below.

In one possible implementation, the plurality of active margin adjustment regions of the target component may include a first margin adjustment region, a second margin adjustment region, a third margin adjustment region, a fourth margin adjustment region, and an inactive margin adjustment region, with the first margin adjustment region, the second margin adjustment region, the third margin adjustment region, the fourth margin adjustment region, and the inactive margin adjustment region being non-overlapping regions. Referring specifically to fig. 5, a schematic diagram of an inner margin adjustment area according to an embodiment of the present application is shown. In fig. 5, all the areas inside the dashed frame represent the inner margin adjustment areas of the target component, including a first inner margin adjustment area, a second inner margin adjustment area, a third inner margin adjustment area, a fourth inner margin adjustment area, and an ineffective inner margin adjustment area, where the first inner margin adjustment area is a dark color partial area in the upper position inside the dashed frame, the corresponding first inner margin has a value of 0px, the second inner margin adjustment area is a dark color partial area in the lower position inside the dashed frame, the corresponding second inner margin has a value of 0px, the third inner margin adjustment area has a dark color partial area in the left position inside the dashed frame, the corresponding third inner margin has a value of 0px, the fourth inner margin adjustment area has a dark color partial area in the right position inside the dashed frame, the corresponding fourth inner margin has a value of 0px, and the ineffective inner margin adjustment area has a remaining white color partial area except for four parts inside the dashed frame.

In particular, when the first area activated by the user belongs to the invalid inner margin adjustment area, the first inner margin adjustment area, the second inner margin adjustment area, the third inner margin adjustment area and the fourth inner margin adjustment area of the target component can be simultaneously controlled to be in editable states in response to the operation of activating the invalid inner margin adjustment area.

In one possible implementation manner, the first inner margin adjustment region, the second inner margin adjustment region, the third inner margin adjustment region and the fourth inner margin adjustment region are controlled to be in an editable state, and specific values of inner margins corresponding to the first inner margin adjustment region, the second inner margin adjustment region, the third inner margin adjustment region and the fourth inner margin adjustment region can be displayed to be in the editable state. For example, a selectable editing control of the margin within the target component may be displayed. That is, an option of a specific value of the inner margin adjustable can be preset, and when the inner margin adjusting area is triggered to be in an editable state, an editing control of the selectable option of the inner margin can be displayed for selecting and editing the specific value of the inner margin.

Referring specifically to fig. 6, a schematic diagram of an inner margin adjustment area in an editable state according to an embodiment of the application is shown. When the user activates the invalid inner margin adjusting region, the first inner margin adjusting region, the second inner margin adjusting region, the third inner margin adjusting region and the fourth inner margin adjusting region can be controlled to be in an editable state, at this time, selectable editing controls for specific values of the inner margin are displayed on the left side of the inner margin adjusting region, and the user can edit the specific values of the inner margin through the selectable editing controls.

In one possible implementation, when the effective inner margin adjustment region is in an editable state, the inner margin may be adjusted by inputting an inner margin absolute value or an inner margin relative value corresponding to the effective inner margin adjustment region. Wherein the absolute value of the inner margin may represent an actual value of the inner margin, e.g. 30px, and the relative value of the inner margin may be represented as a value to be adjusted based on the current inner margin, e.g. increasing by 8px or decreasing by 6px.

In one possible implementation, the selectable editing control may include an input box for the margin and a value for the margin selectable. Wherein the optional value may be an absolute value of the inner margin or a relative value of the inner margin. The optional values may be set in conjunction with actual requirements, which are not limited in this embodiment of the present application. After clicking the optional values, the user can display the adjusted inner margin values in the input frame of the inner margin, and simultaneously adjust specific values of the first inner margin, the second inner margin, the third inner margin and the fourth inner margin to be adjusted values. For example, after the inner margin absolute value is selected, displaying the selected inner margin absolute value in the input box, namely, the adjusted numerical value; and after the relative value of the inner margin is selected, determining the actual value of the adjusted inner margin according to the value of the current inner margin and the selected relative value of the inner margin, and displaying the actual value of the adjusted inner margin in an input box.

The following description will take an example in which the selectable option edit control includes a selectable margin absolute value. Referring to FIG. 6, the optional values for the inner margin include 0px, 4px, 8px, 12px, 16px, 20px, 24px, 28px. When the user clicks the optional value of 8px, specific values of the first inner margin, the second inner margin, the third inner margin and the fourth inner margin are simultaneously adjusted to 8px. Since the specific values of the first inner margin, the second inner margin, the third inner margin and the fourth inner margin are simultaneously adjusted at this time, only one selectable item of the inner margins can be displayed.

In one possible implementation, the user may directly input any value in the input box of the margin as the specific value of the margin, in addition to selecting the specific value of the margin through the selectable item editing control of the margin. Referring to fig. 7, a schematic diagram of another inner margin adjustment area in an editable state according to an embodiment of the application is shown. After the user inputs 40 in the input box of the inner margin, the first inner margin, the second inner margin, the third inner margin and the fourth inner margin of the target component are all adjusted to 40px.

In one possible implementation, the user may adjust the values of the plurality of inner margins simultaneously, or may adjust the inner margins individually for any one direction. In particular, in response to a user activating any one of the plurality of effective inner margin adjustment regions, the activated effective inner margin adjustment region may be controlled to be in an editable state. That is, the user may activate all of the effective inner margin adjustment regions simultaneously, or may activate only one of the effective inner margin adjustment regions. For example, in response to an operation to activate any one of the active margin adjustment areas, a selectable editing control for the active margin is displayed in the active margin adjustment area.

Taking the application scenario as an example, when the user clicks the first inner margin adjustment area, the first inner margin adjustment area is controlled to be in an editable state in response to an operation of activating the first inner margin adjustment area. Referring specifically to fig. 8, a schematic diagram of still another inner margin adjustment area provided in an embodiment of the present application in an editable state is shown. When the user activates the first margin adjustment area, the first margin adjustment area is controlled to be in an editable state, and selectable item editing controls of the first margin are displayed.

In one possible implementation, when the user controls the mouse to hover over the first region, the inside margin adjustment region of the target component may be controlled to be highlighted. In particular, referring to fig. 9, a schematic diagram of highlighting an inner margin adjustment area according to an embodiment of the present application is shown. When the first region belongs to the invalid inner margin adjustment region, the entire inner margin adjustment region of the target component can be controlled to be highlighted when the user controls the mouse to hover over the invalid inner margin adjustment region.

In one possible implementation, when the control mouse hovers over an inactive outer-distance adjustment area, only the plurality of active outer-distance adjustment areas may be controlled to be highlighted. Referring to fig. 10, another schematic view of highlighting an inner margin adjustment area according to an embodiment of the present application is shown. When the user controls the mouse to hover over the invalid inner margin adjusting region, the first inner margin adjusting region, the second inner margin adjusting region, the third inner margin adjusting region and the fourth inner margin adjusting region of the target component can be controlled to be highlighted.

In one possible implementation, the active margin adjustment areas are controlled to be highlighted in response to controlling a mouse hovering over any of the active margin adjustment areas. Referring specifically to fig. 11, in response to a user controlling a mouse hovering over the first inner margin adjustment area, the first inner margin adjustment area may be individually controlled to be highlighted. The principle of individually controlling the second inner margin adjustment region, the third inner margin adjustment region, and the fourth inner margin adjustment region to perform highlighting is the same as that of the first inner margin adjustment region, and a detailed description thereof will be omitted.

S303: in response to an operation to activate the second region of the margin adjuster, a plurality of active margin adjustment regions of the margin adjustment region of the margin adjuster are controlled to be in an editable state.

When clicking the second area of the margin adjuster, the entire outer margin adjusting area of the margin adjuster may be simultaneously controlled to be in an editable state, so that when a user wants to simultaneously adjust a specific value of the outer margin, the value of each direction of the outer margin need not be clicked one by one to be adjusted.

In one possible implementation, the outer edge distance adjustment region may include a plurality of active outer edge distance adjustment regions and inactive outer edge distance adjustment regions, and the plurality of active outer edge distance adjustment regions and the inactive outer edge distance adjustment regions are non-overlapping regions. In response to a user activating the inactive outer margin adjustment region, all of the active outer margin adjustment regions may be controlled to be in an editable state. For ease of understanding, a specific application scenario will be described below.

In one possible implementation, the plurality of active outer margin adjustment regions of the target component may include a first outer margin adjustment region, a second outer margin adjustment region, a third outer margin adjustment region, a fourth outer margin adjustment region, and an inactive outer margin adjustment region, with the first outer margin adjustment region, the second outer margin adjustment region, the third outer margin adjustment region, the fourth outer margin adjustment region, and the inactive outer margin adjustment region being non-overlapping regions. Referring specifically to fig. 12, a schematic diagram of an outer edge distance adjustment area according to an embodiment of the present application is shown. In fig. 12, all areas outside the dashed box represent outer margin adjustment areas of the target component, including a first outer margin adjustment area, a second outer margin adjustment area, a third outer margin adjustment area, a fourth outer margin adjustment area, and an ineffective outer margin adjustment area. The first outer margin adjusting area is a dark color part area outside the dotted line frame and located at the upper position, the corresponding value of the first outer margin is 0px, the second outer margin adjusting area is a dark color part area outside the dotted line frame and located at the lower position, the corresponding value of the second outer margin is 16px, the third outer margin adjusting area is a dark color part area outside the dotted line frame and located at the left position, the corresponding value of the third outer margin is 0px, the fourth outer margin adjusting area is a dark color part area outside the dotted line frame and located at the right position, the corresponding value of the fourth outer margin is 0px, and the invalid outer margin adjusting area is the rest light color part area outside the dotted line frame except for four dark color parts.

In particular, when the second area activated by the user belongs to the inactive outer margin adjustment area, the first outer margin adjustment area, the second outer margin adjustment area, the third outer margin adjustment area and the fourth outer margin adjustment area of the target component can be simultaneously controlled to be in an editable state in response to the operation of activating the inactive outer margin adjustment area.

Similarly, when the inactive margin adjustment area is activated, selectable editing controls of the target component margin may be displayed, so that the user simultaneously edits and adjusts specific values of the first margin, the second margin, the third margin, and the fourth margin through the selectable editing controls of the margin.

In one possible implementation, when the effective outer edge distance adjustment area is in an editable state, the outer edge distance may be adjusted by inputting an outer edge distance absolute value or an outer edge distance relative value corresponding to the effective outer edge distance adjustment area. Wherein the absolute value of the outer margin may represent the actual value of the outer margin, e.g. 30px, and the relative value of the outer margin may represent the value that needs to be adjusted based on the current outer margin, e.g. increasing by 8px or decreasing by 6px.

Referring specifically to fig. 13, a schematic diagram of an outer edge distance adjustment area in an editable state according to an embodiment of the application is shown. In the application scenario, the description is given taking an example that the selectable outer margin absolute value is included in the selectable item editing control. When the user clicks the invalid outer margin adjusting region, the first outer margin adjusting region, the second outer margin adjusting region, the third outer margin adjusting region and the fourth outer margin adjusting region can be simultaneously controlled to be in an editable state, and at the moment, selectable editing controls of the outer margin are displayed on the left side of the outer margin adjusting region. The selectable item editing control may include an input box for the margin, and a specific value for the margin is selectable. When the user clicks on a certain optional numerical value, the numerical value can be displayed in the input box of the outer margin, and specific numerical values of the first outer margin, the second outer margin, the third outer margin and the fourth outer margin are simultaneously adjusted to be the selected numerical value. As shown in fig. 13, when the user clicks the optional value of 8px, specific values of the first margin, the second margin, the third margin, and the fourth margin are simultaneously adjusted to 8px.

In one possible implementation, the user may directly input any value in the input box of the outer margin as a specific value of the outer margin, in addition to selecting a specific value of the outer margin through the selectable item editing control of the outer margin.

According to the principle of adjusting the inner edge distance in the above embodiment, the user can adjust the values of a plurality of outer edge distances at the same time, and can also adjust the outer edge distance in any direction independently. In response to an operation to activate any one of the plurality of effective outer edge distance adjustment regions, the activated effective outer edge distance adjustment region is controlled to be in an editable state.

Referring to fig. 14, another schematic diagram of an outer margin adjustment area in an editable state according to an embodiment of the application is shown. Specifically, when the user clicks the first outer margin adjustment region, the first outer margin adjustment region is controlled to be in an editable state in response to an operation of activating the first outer margin adjustment region. For example, when the user activates the first outer margin adjustment region, the first outer margin adjustment region is controlled to be in an editable state and selectable editing controls of the first outer margin are displayed.

In one possible implementation, the outer margin adjustment region of the target component may be controlled to be highlighted when the user controls the mouse to hover over the second region. In particular, referring to fig. 15, a schematic view of highlighting an outer edge distance adjustment area according to an embodiment of the present application is shown. When the second region belongs to the invalid outer margin adjustment region, the entire outer margin adjustment region of the target component can be controlled to be highlighted when the user hovers over the invalid outer margin adjustment region.

In one possible implementation, only the plurality of active outer margin adjustment regions may be controlled to be highlighted in response to controlling a mouse hovering over an inactive outer margin adjustment region. Referring to fig. 16, another schematic view of highlighting an outer edge distance adjustment area according to an embodiment of the present application is shown. Optionally, when the user controls the mouse to hover over the inactive outer margin adjustment region, the first outer margin adjustment region, the second outer margin adjustment region, the third outer margin adjustment region, and the fourth outer margin adjustment region of the target component may be controlled to be highlighted.

In one possible implementation, in response to controlling a mouse hovering over any one of the active outer margin adjustment areas, only that active inner margin adjustment area may be controlled to be highlighted. Referring specifically to fig. 17, a schematic view of highlighting an outer edge distance adjustment area according to an embodiment of the present application is shown. In response to a user controlling a mouse hovering over the first outer margin adjustment area, the first outer margin adjustment area may be separately controlled to be highlighted.

According to the method provided by the application, when a user clicks a specific area of the margin adjuster, each inner margin adjusting area of the target assembly can be adjusted at the same time, or each outer margin adjusting area of the target assembly can be adjusted at the same time, the user does not need to click each margin adjusting area one by one to select, the number of times of margin adjustment by the user is reduced, the mode of margin adjustment by the user is improved, and the user experience is improved.

Based on the method embodiment, the embodiment of the application also provides a device for adjusting the margin of the assembly. Referring to fig. 18, a schematic diagram of a device for adjusting a margin of a component according to an embodiment of the present application is shown.

The apparatus 1800 includes:

a display unit 1801 for displaying a margin adjuster of a target component in response to a trigger operation for the target component;

a first control unit 1802 for controlling a plurality of effective inner margin adjustment regions of an inner margin adjustment region of the margin adjuster to be in an editable state in response to an operation to activate a first region of the margin adjuster;

a second control unit 1803 for controlling a plurality of effective outside-edge-distance adjustment areas of the outside-edge-distance adjustment area of the edge-distance adjuster to be in an editable state in response to an operation to activate the second area of the edge-distance adjuster.

In one possible implementation manner, the inner margin adjustment area includes a plurality of effective inner margin adjustment areas and an ineffective inner margin adjustment area, and the plurality of effective inner margin adjustment areas and the ineffective inner margin adjustment area are areas that do not overlap each other, and if the first area belongs to the ineffective inner margin adjustment area, the first control unit 1802 is specifically configured to control, in response to an operation of activating the ineffective inner margin adjustment area, the plurality of effective inner margin adjustment areas to be in an editable state.

In a possible implementation manner, the outer edge distance adjustment area includes a plurality of effective outer edge distance adjustment areas and an ineffective outer edge distance adjustment area, and the plurality of effective outer edge distance adjustment areas and the ineffective outer edge distance adjustment area are areas that do not overlap each other, and if the second area belongs to the ineffective outer edge distance adjustment area, the second control unit 1803 is specifically configured to control, in response to an operation of activating the ineffective outer edge distance adjustment area, the plurality of effective outer edge distance adjustment areas to be in an editable state.

In a possible implementation manner, the first control unit 1802 is further configured to control, in response to an operation of activating any one of the plurality of effective inner margin adjustment areas, the activated effective inner margin adjustment area to be in an editable state.

In a possible implementation manner, the second control unit 1803 is further configured to, in response to an operation of activating any one of the plurality of active outer edge adjustment areas, control the activated active outer edge adjustment area to be in an editable state.

In one possible implementation manner, the first control unit 1802 is further configured to adjust the inner margin by inputting an inner margin absolute value or an inner margin relative value corresponding to the effective inner margin adjustment area when the effective inner margin adjustment area is in an editable state.

In a possible implementation manner, the second control unit 1803 is further configured to adjust, when the effective outer edge adjustment area is in an editable state, an outer edge distance by inputting an outer edge distance absolute value or an outer edge distance relative value corresponding to the effective outer edge distance adjustment area.

In one possible implementation, the first control unit 1802 is specifically configured to display a selectable item editing control of an effective inner margin in the effective inner margin adjustment area in response to an operation of activating the effective inner margin adjustment area.

In one possible implementation, the first control unit 1802 is further configured to control highlighting of the plurality of valid inside margin adjustment regions in response to controlling a mouse hovering over the invalid inside margin adjustment region.

In a possible implementation manner, the second control unit 1803 is further configured to control highlighting of the plurality of active outer edge adjustment areas in response to controlling a mouse hovering over the inactive outer edge adjustment areas.

In one possible implementation, the first control unit 1802 is further configured to control the effective inner margin adjustment area to be highlighted in response to controlling an operation of hovering a mouse over the effective inner margin adjustment area.

In a possible implementation manner, the second control unit 1803 is further configured to control, in response to an operation of controlling the mouse to hover over the effective outer edge distance adjustment region, highlighting the effective outer edge distance adjustment region.

In one possible implementation manner, the plurality of effective inner margin adjustment regions include a first inner margin adjustment region, a second inner margin adjustment region, a third inner margin adjustment region, and a fourth inner margin adjustment region, and the first control unit 1802 is specifically configured to control, in response to an operation of activating the ineffective inner margin adjustment region, that all of the first inner margin adjustment region, the second inner margin adjustment region, the third inner margin adjustment region, and the fourth inner margin adjustment region are in an editable state.

In a possible implementation manner, the plurality of effective outer margin adjustment areas include a first outer margin adjustment area, a second outer margin adjustment area, a third outer margin adjustment area, and a fourth outer margin adjustment area, and the second control unit 1803 is specifically configured to control, in response to an operation of activating the ineffective outer margin adjustment area, the first outer margin adjustment area, the second outer margin adjustment area, the third outer margin adjustment area, and the fourth outer margin adjustment area to be in an editable state.

It should be noted that, for specific implementation of each unit in this embodiment, reference may be made to the related description in the above method embodiment. The division of the units in the embodiment of the application is schematic, only one logic function is divided, and other division modes can be adopted in actual implementation. The functional units in the embodiment of the application can be integrated in one processing unit, or each unit can exist alone physically, or two or more units are integrated in one unit. For example, in the above embodiment, the processing unit and the transmitting unit may be the same unit or may be different units. The integrated units may be implemented in hardware or in software functional units.

Referring to fig. 19, a schematic diagram of an electronic device 1900 suitable for use in implementing embodiments of the present application is shown. The terminal device in the embodiment of the present application may include, but is not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), car terminals (e.g., car navigation terminals), and the like, and stationary terminals such as digital TVs, desktop computers, and the like. The electronic device shown in fig. 19 is only an example, and should not impose any limitation on the functions and the scope of use of the embodiment of the present application.

As shown in fig. 19, the electronic device 1900 may include a processing apparatus (e.g., a central processor, a graphics processor, etc.) 1901 that may perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 1902 or a program loaded from a storage apparatus 1908 into a Random Access Memory (RAM) 1903. In the RAM1903, various programs and data required for the operation of the electronic device 1900 are also stored. The processing device 1901, ROM 1902, and RAM1903 are connected to each other via a bus 1904. An input/output (I/O) interface 1905 is also connected to bus 1904.

In general, the following devices may be connected to I/O interface 1905: input devices 1906 including, for example, a touch screen, touchpad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, and the like; an output device 1907 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, and the like; storage 1908 including, for example, a magnetic tape, a hard disk, and the like; communication device 1909. The communication device 1909 may allow the electronic device 1900 to communicate wirelessly or by wire with other devices to exchange data. While fig. 19 shows an electronic device 1900 having various apparatus, it is understood that not all illustrated apparatus is required to be implemented or provided. More or fewer devices may be implemented or provided instead.

In particular, according to embodiments of the present application, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present application include a computer program product comprising a computer program embodied on a non-transitory computer readable medium, the computer program comprising program code for performing the method shown in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network via the communication device 1909, or installed from the storage device 1908, or installed from the ROM 1902. The above-described functions defined in the method of the embodiment of the present application are performed when the computer program is executed by the processing device 1901.

The electronic device provided by the embodiment of the present application belongs to the same inventive concept as the method provided by the above embodiment, and technical details not described in detail in the present embodiment can be seen in the above embodiment, and the present embodiment has the same beneficial effects as the above embodiment.

An embodiment of the present application provides a computer storage medium having stored thereon a computer program which, when executed by a processor, implements the method provided by the above embodiment.

The computer readable medium of the present application may be a computer readable signal medium or a computer readable storage medium, or any combination of the two. The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples of the computer-readable storage medium may include, but are not limited to: an electrical connection having 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 portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present application, however, the computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, with the computer-readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, fiber optic cables, RF (radio frequency), and the like, or any suitable combination of the foregoing.

In some implementations, the clients, servers may communicate using any currently known or future developed network protocol, such as HTTP (Hyper Text Transfer Protocol ), and may be interconnected with any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), the internet (e.g., the internet), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future developed networks.

The computer readable medium may be contained in the electronic device; or may exist alone without being incorporated into the electronic device.

The computer readable medium carries one or more programs which, when executed by the electronic device, cause the electronic device to perform the method described above.

Computer program code for carrying out operations of the present application may be written in one or more programming languages, including, but not limited to, an object oriented programming language such as Java, smalltalk, C ++ and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computer (for example, through the Internet using an Internet service provider).

The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

The units involved in the embodiments of the present application may be implemented in software or in hardware. Where the names of the units/modules do not constitute a limitation of the units themselves in some cases.

The functions described above herein may be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: a Field Programmable Gate Array (FPGA), an Application Specific Integrated Circuit (ASIC), an Application Specific Standard Product (ASSP), a system on a chip (SOC), a Complex Programmable Logic Device (CPLD), and the like.

In the context of the present application, 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. The 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 portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

It should be noted that, in the present description, each embodiment is described in a progressive manner, and each embodiment is mainly described in a different manner from other embodiments, and identical and similar parts between the embodiments are all enough to refer to each other. For the system or device disclosed in the embodiments, since it corresponds to the method disclosed in the embodiments, the description is relatively simple, and the relevant points refer to the description of the method section.

It should be understood that in the present application, "at least one (item)" means one or more, and "a plurality" means two or more. "and/or" for describing the association relationship of the association object, the representation may have three relationships, for example, "a and/or B" may represent: only a, only B and both a and B are present, wherein a, B may be singular or plural. The character "/" generally indicates that the context-dependent object is an "or" relationship. "at least one of" or the like means any combination of these items, including any combination of single item(s) or plural items(s). For example, at least one (one) of a, b or c may represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", wherein a, b, c may be single or plural.

It is further noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

The steps of a method or algorithm described in connection with the embodiments disclosed herein may be embodied directly in hardware, in a software module executed by a processor, or in a combination of the two. The software modules may be disposed in Random Access Memory (RAM), memory, read Only Memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

The previous description of the disclosed embodiments is provided to enable any person skilled in the art to make or use the present application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the application. Thus, the present application is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method of adjusting a margin of a component, the method comprising:

2. The method of claim 1, wherein the margin adjustment region comprises a plurality of active margin adjustment regions and an inactive margin adjustment region, and the plurality of active margin adjustment regions and the inactive margin adjustment region are non-overlapping regions, and wherein controlling the plurality of active margin adjustment regions of the margin adjuster in an editable state in response to activating the first region of the margin adjuster if the first region belongs to the inactive margin adjustment region comprises:

3. The method of claim 1, wherein the outer margin adjustment region comprises a plurality of active outer margin adjustment regions and inactive outer margin adjustment regions, and the plurality of active outer margin adjustment regions and inactive outer margin adjustment regions are non-overlapping regions, and wherein controlling the plurality of active inner margin adjustment regions of the outer margin adjustment region in an editable state in response to activating the operation of the second region of the margin adjuster if the second region belongs to the inactive outer margin adjustment region comprises:

4. The method according to claim 2, wherein the method further comprises:

5. A method according to claim 3, characterized in that the method further comprises:

6. The method according to claim 4, wherein the method further comprises:

7. The method of claim 5, wherein the method further comprises:

8. The method of claim 4, wherein the controlling the activated active margin adjustment region in an editable state in response to an operation to activate any one of the plurality of active margin adjustment regions comprises:

9. The method according to claim 2, wherein the method further comprises:

10. A method according to claim 3, characterized in that the method further comprises:

11. The method according to claim 4, wherein the method further comprises:

12. The method of claim 5, wherein the method further comprises:

13. The method of claim 2, wherein the plurality of active margin adjustment regions includes a first margin adjustment region, a second margin adjustment region, a third margin adjustment region, a fourth margin adjustment region, wherein controlling the plurality of active margin adjustment regions to each be in an editable state in response to an operation to activate the inactive margin adjustment region comprises:

14. The method of claim 3, wherein the plurality of active outer margin adjustment regions includes a first outer margin adjustment region, a second outer margin adjustment region, a third outer margin adjustment region, a fourth outer margin adjustment region, wherein controlling the plurality of active outer margin adjustment regions to each be in an editable state in response to an operation to activate the inactive outer margin adjustment region comprises:

15. An apparatus for adjusting the margin of a component, the apparatus comprising:

16. An electronic device, the device comprising: a processor and a memory;

the memory is used for storing instructions or computer programs;

the processor for executing the instructions or computer program in the memory to cause the electronic device to perform the method of any of claims 1-14.

17. A computer readable storage medium having instructions stored therein which, when executed on a device, cause the device to perform the method of any of claims 1-14.