Component editing method and device and electronic equipment

Abstract

The invention provides a component editing method and device and electronic equipment, and the method comprises the steps: controlling a first component to move in a page editing interface along with a dragging operation in response to the dragging operation for the first component; in response to the fact that the dragging position of the dragging operation is located at the component position of a second component in the page editing interface, component imbedding information is controlled to be displayed at the dragging position, and the component imbedding information is used for indicating whether the first component can be imbedded in the second component or not; if the component insertion information indicates that the first component is insertable within the second component, the first component is inserted within the second component in response to an end of the drag operation. In the mode, the user can observe the prompt of the component imbedding information in real time along with the dragging position in the process of dragging the component on the page editing interface, the mode can more easily help a new user to adjust the component position, meanwhile, the accuracy of page editing operation is also improved, and the user experience is improved. And the repeated trial and error cost caused by difficulty in distinguishing the hierarchy position of the component by the user is reduced.

Description

Technical Field

[0001] This invention relates to the field of page editing technology, and in particular to a component editing method, apparatus, and electronic device. Background Technology

[0002] In the editor, when a user is editing and dragging a component on the page, a placeholder box for the insertion position can be seen in real time in the structure tree. When the insertion position supports the placement of a component, a blue insertion guide line can be seen on the canvas, and a blue placeholder block can be seen in the structure tree; when the insertion position does not support the placement of a component, a red insertion guide line can be seen on the canvas, and a red placeholder block can be seen in the structure tree. This solution can detect whether a draggable component can be placed by the color status of the insertion guide line. However, the position of the guide line is not obvious in terms of its hierarchical relationship with other components. Users need to check the position of the placeholder block in the structure tree, resulting in a poor user experience when editing components. Summary of the Invention

[0003] In view of this, the purpose of the present invention is to provide a component editing method, apparatus and electronic device to improve the accuracy of page editing operations and reduce the repeated trial and error costs caused by users' difficulty in distinguishing the hierarchical position of components.

[0004] In a first aspect, embodiments of the present invention provide a component editing method, which provides a page editing interface through a terminal device. The page editing interface includes multiple components located at different display levels. The method includes: in response to a drag operation on a first component, controlling the first component to move within the page editing interface following the drag operation; in response to the drag position of the drag operation being located at the component position of a second component in the page editing interface, controlling the display of component placement information at the drag position; wherein the component placement information is used to indicate whether the first component can be placed into the second component; if the component placement information indicates that the first component can be placed into the second component, in response to the end of the drag operation, placing the first component into the second component.

[0005] Secondly, embodiments of the present invention also provide a component editing device, which provides a page editing interface through a terminal device. The page editing interface includes multiple components located at different display levels. The device includes: a component moving module, used to control the first component to move within the page editing interface in response to a drag operation on the first component; an information display module, used to control the display of component placement information at the drag position in response to the drag position of the drag operation being located at the component position of the second component in the page editing interface; wherein the component placement information is used to indicate whether the first component can be placed into the second component; and a component placement module, used to place the first component into the second component in response to the end of the drag operation if the component placement information indicates that the first component can be placed into the second component.

[0006] Thirdly, embodiments of the present invention also provide an electronic device, which includes a processor and a memory, wherein the memory stores computer-executable instructions that can be executed by the processor, and the processor executes the computer-executable instructions to implement the above-described component editing method.

[0007] Fourthly, embodiments of the present invention also provide a computer-readable storage medium storing computer-executable instructions, which, when invoked and executed by a processor, cause the processor to implement the aforementioned component editing method.

[0008] The embodiments disclosed herein bring the following beneficial effects: This disclosure provides a component editing method, apparatus, and electronic device. First, in response to a drag operation on a first component, the first component is controlled to move within a page editing interface. Then, in response to the drag position being located at the component position of a second component in the page editing interface, component placement information is displayed at the drag position. This placement information indicates whether the first component can be placed within the second component. If the placement information indicates that the first component can be placed within the second component, the first component is placed within the second component upon the end of the drag operation. In this method, the user can observe the component placement information in real-time as the component is dragged within the page editing interface. This method makes it easier for new users to adjust component positions, improves the accuracy of page editing operations, and reduces the cost of repeated trial and error caused by users' difficulty in distinguishing component hierarchical positions.

[0009] Other features and advantages of the invention will be set forth in the description which follows, and will be apparent in part from the description, or may be learned by practicing the invention. The objects and other advantages of the invention are realized and obtained in accordance with the structures particularly pointed out in the description, claims and drawings.

[0010] To make the above-mentioned objects, features and advantages of the present invention more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

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

[0012] Figure 1This is a schematic diagram illustrating the display of insertion information in the prior art, provided by an embodiment of the present invention. Figure 2 This is a schematic diagram illustrating the display of insertion information in another prior art provided by an embodiment of the present invention; Figure 3 A flowchart illustrating a component editing method provided in an embodiment of the present invention; Figure 4 This is a schematic diagram of the structure of a page component editing system provided in an embodiment of the present invention; Figure 5 This is a schematic diagram illustrating the display of component placement information and component placement identifier according to an embodiment of the present invention; Figure 6 This is a schematic diagram illustrating the display of component placement information and component placement identifier according to an embodiment of the present invention; Figure 7 This is a schematic diagram showing another component placement information and component placement identifier provided in an embodiment of the present invention; Figure 8 This is a schematic diagram of the structure of a component editing device provided in an embodiment of the present invention; Figure 9 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0013] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this disclosure, and not all embodiments. The components of the embodiments of this disclosure described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0014] Therefore, the following detailed description of the embodiments of this disclosure provided in the accompanying drawings is not intended to limit the scope of the claimed disclosure, but merely to illustrate selected embodiments of the disclosure. All other embodiments obtained by those skilled in the art based on the embodiments of this disclosure without inventive effort are within the scope of protection of this disclosure.

[0015] In the editor, when a user drags and drops components on the page, a placeholder box for the insertion position can be seen in real-time in the structure tree of the page editing interface. When the insertion position supports the placement of components, a blue insertion guide line can be seen on the canvas of the page editing interface, and a blue placeholder block can be seen in the structure tree, such as... Figure 1 The diagram shown is a schematic representation of a prior art method for displaying placement information according to an embodiment of the present invention. This placement information includes placement guide lines displayed on the canvas and placeholder blocks displayed in the structure tree. Figure 1The image shown illustrates the placement information when a component is placed in a specific location. Figure 1 The black line displayed below the input box on the form field in the middle canvas is used to indicate the blue placement guide line mentioned above, and the black dashed box in the structure tree is used to indicate the blue placeholder block mentioned above.

[0016] When the placement location does not support component placement, a red placement guide line can be seen on the canvas, and a red placeholder block can be seen on the structure tree; for example... Figure 2 The diagram shown illustrates another prior art placement information display according to an embodiment of the present invention. This placement information includes placement guide lines displayed on the canvas and placeholder blocks displayed in the structure tree. Figure 2 The image shown is a diagram illustrating the placement information when the placement location does not support placing a component. Figure 2 The gray vertical lines displayed on the canvas are used to indicate the aforementioned red placement guide lines, and the gray dashed boxes in the structure tree are used to indicate the aforementioned red placeholder blocks.

[0017] The above solution can detect whether a component supports placement and dragging by using the color state of the guide line. However, the position of the guide line is not obvious in terms of its hierarchical relationship with other components. It is necessary to check the position of the placeholder block in the structure tree, which results in a poor user experience when editing components.

[0018] Based on this, the component editing method, apparatus and system provided in this embodiment of the invention can be applied to page editing scenarios.

[0019] To facilitate understanding of the embodiments of the present invention, a component editing method provided by the embodiments of the present invention will first be described in detail. A page editing interface is provided through a terminal device, which includes multiple components located at different levels; wherein, the terminal device can be a mobile phone, tablet computer, or personal computer, etc. Figure 3 As shown, the method includes the following specific steps: Step S302: In response to the drag operation on the first component, control the first component to move within the page editing interface following the drag operation.

[0020] The aforementioned page editing interface is used for customizing and editing the page. This interface includes multiple components, which are page elements that make up the page. These components can be buttons, text, panels, icons, cards, or lists, etc. There are multiple hierarchical relationships between these components. For example, a component can be a parent node, which can have multiple child nodes, each corresponding to a component.

[0021] The first component mentioned above can be any one of the multiple components displayed in the page editing interface, or any one of the components in the component library. The component library includes multiple types of components, and users can drag and drop components from the component library into the page editing interface to use the dragged component as the component to be edited in the page editing interface.

[0022] When a drag operation is performed on the first component, the first component can move within the page editing interface following the drag operation; that is, the display position of the first component in the page editing interface changes according to the drag position. Specifically, on a computer, the user can select the first component with the mouse pointer and drag it to move it within the page editing interface; on a mobile device, the user can drag the first component to move it within the page editing interface using a drag operation applied to it.

[0023] Step S304: In response to the drag operation, the drag position is located at the component position of the second component in the page editing interface, and the component placement information is displayed at the drag position; wherein, the component placement information is used to indicate whether the first component can be placed into the second component.

[0024] In practice, users can adjust the position of the first component in the page editing interface by dragging. When the dragged position partially overlaps with the position of the second component in the page editing interface, component placement information will be displayed at the dragged position. The second component can be any component in the page editing interface other than the first component.

[0025] The aforementioned component placement information is used to indicate the placement position, placement status, and placement hierarchy of the first component. For example, when the component placement information indicates that the first component can be placed inside the second component, the placement position of the first component is within the component position of the second component, the placement status is "placeable," and the placement hierarchy is that the second component is the parent node of the first component; when the component placement information indicates that the first component can not be placed inside the second component, the placement status of the first component is "not placeable," and therefore there is no placement position or placement hierarchy.

[0026] Step S306: If the component placement information indicates that the first component can be placed into the second component, in response to the end of the drag operation, the first component is placed into the second component.

[0027] In practice, if the component placement information displayed in the page editing interface indicates that the first component can be placed inside the second component, the first component will be placed in the component position of the second component in the page editing interface when the user finishes dragging the first component.

[0028] If the component placement information displayed in the page editing interface indicates that the first component cannot be placed inside the second component, in response to the end of the drag operation, the first component is placed at the specified position in the page editing interface, and / or a prompt message is displayed in the page editing interface; wherein the prompt message is used to indicate that the position adjustment of the first component has failed.

[0029] The specified position can be a fixed position in the page editing interface, the end position of a drag operation, or the position of the first component in the page editing interface before the drag operation is performed. The prompt message can be text, which is used to inform the user that the first component's position adjustment failed and that the first component needs to be placed in a position that supports placement in the page editing interface.

[0030] The present invention provides a component editing method in which users can observe the component placement information in real time as the dragging position is followed during the dragging process of the component in the page editing interface. This method makes it easier for new users to adjust the component position, while also improving the accuracy of page editing operations and reducing the cost of repeated trial and error caused by users' difficulty in distinguishing the component hierarchy position.

[0031] The following examples describe how component placement information is determined.

[0032] Specifically, the process of controlling the display of component placement information at the drag position in response to the drag operation, where the drag position is located at the component position of the second component in the page editing interface, may include: determining the component placement information based on the component configuration information of the second component and the configuration information of the first component, and displaying the component placement information at the drag position.

[0033] In the specific implementation, as the first component moves in the page editing interface following the drag operation, it is detected in real time whether the drag position is located on the component position of a certain component in the page editing interface. If the drag position is detected to be located on the component position of the second component in the page editing interface, it is necessary to obtain the component configuration information of the first component and the component configuration information of the second component, and generate component placement information according to the matching status of the component configuration information of the first component and the component configuration information of the second component, and display the component placement information in real time at the drag position.

[0034] When the component configuration information of the first component matches the component configuration information of the second component, component placement information is generated that the first component can be placed into the second component; when the component information of the first component does not match the component information of the second component, component placement information is generated that the first component cannot be placed into the second component.

[0035] In the actual implementation, the component configuration information of each component in the page editing interface is pre-set. This configuration information indicates the types of components that a component supports being placed into and the types of components that a component can be placed into. For example, the configuration information of a certain component may be that the component supports being placed into a Form component, and the component can be placed into a MenuItem component, etc.

[0036] In one specific embodiment, the present invention can be applied to the CodeWave page visual editor. The CodeWave page visual editor is a visual editor within the CodeWave intelligent development platform used for page building. It allows developers to drag and drop page components and dependency library components provided by the platform onto the canvas, and to achieve customized development of different pages through layout design, style design, and interaction design. The CodeWave intelligent development platform is an intelligent development platform that allows for the rapid generation of applications with little or no coding. The platform provides visual editing tools for pages, logic, and processes, enabling developers to quickly build applications through simple operations such as drag-and-drop and configuring properties.

[0037] The aforementioned CodeWave page visual editor has cross-frontend framework and cross-component library integration capabilities, which are achieved through methods such as... Figure 4 The diagram shows the implementation of the page component editing architecture. Figure 4 The component library includes components of various types. Component libraries from different front-end frameworks can be connected to the visual editor through configuration designer access rules, thus decoupling the front-end framework from the designer and providing cross-front-end framework component library access capabilities. The designer access rules can be used to configure the configuration information of each component in the component library; the configuration information for different components is usually different. When the page designer is running, the visual editor can read the component configuration information, allowing it to determine in real time whether the currently dragged component can be placed inside a second component as it is moved within the page editing interface.

[0038] Figure 4 The hierarchical relationship between components is described by NASL. NASL carries the designer access rules configured in the component library through the IDE model layer. Then, in the sandbox, the NASL description is transformed into a component template, which in turn becomes a structure tree. The Proxy in the sandbox listens to the user's operations on the structure tree in real time. When dragging the first component, the ID of the first component being operated on and the ID of the second component to be placed are sent back to the designer runtime module. The designer runtime model combines the configuration information of the first and second components to determine whether the first component can be placed into the second component.

[0039] Figure 4The translator in the system translates the front-end framework according to the parsed designer access rules, and then transmits the translation results to the sandbox. These translation results include the configuration information of each component. This configuration information takes effect in the proxy within the sandbox. The proxy is responsible for implementing target picking capabilities, that is, calculating the second interactive component based on the current drag position, then using the configuration information of the second component to determine in real time whether the currently dragged first component can be placed inside the second component, generating component placement information based on the determination result, and displaying the component placement information on the page editing interface.

[0040] The above structure tree is used to display the component structure tree of a single page. Each node represents a component on the current page. The structure tree shows the collection of page component nodes and their hierarchical relationship. In the structure tree, the top node is the root node, and every other node has a parent node. Some components contain or support manually placing other components, so they can have any number of nodes; some components do not contain or support manually placing other components, so they are nodes without child nodes; sibling nodes are nodes that share the same parent node.

[0041] In the above method, when dragging the first component in the visual editor, the system reads the configuration information of the first component to determine in real time whether the currently dragged first component can be placed into the drag position, and dynamically displays the judgment result on the interactive card that moves with the drag position by converting the tree structure information of the drag position into prompt text.

[0042] The following examples describe how component placement information is displayed.

[0043] Specifically, the above-mentioned page editing interface includes a canvas area and a structure placeholder area; wherein, the canvas area is used to display the component models of multiple components, and the structure placeholder area is used to display the hierarchical relationship of multiple components; the component position of the second component includes: the position of the component model of the second component in the canvas area, or the hierarchical position of the hierarchy to which the second component belongs in the structure placeholder area.

[0044] In a practical implementation, the structure tree displayed on the aforementioned structure placeholder area is used to indicate the hierarchical relationship between multiple components displayed within the canvas area.

[0045] In an optional embodiment, the drag position responding to the drag operation is located at the component position of the second component in the page editing interface. The specific process of controlling the display of component placement information at the drag position includes: responding to the drag operation at the position of the drag position of the second component in the canvas area, displaying component placement information at the drag position, and displaying a component placement identifier at the layer position to which the second component belongs in the structural placeholder area.

[0046] When the drag operation on the first component is performed at the location of the second component's component model in the canvas area, not only will component placement information be displayed at the dragged location, but a component placement indicator will also be displayed at the layer position of the second component in the structural placeholder area. The display style of this component placement indicator differs depending on whether the component placement information indicates that the first component can be placed with the second component and whether the second component cannot be placed. This method helps users intuitively understand the placement position, placement status, and placement hierarchy of the first component through the component placement information. Furthermore, users can directly understand the placement hierarchy of the first component through the component placement indicator.

[0047] Optionally, the component placement information includes a target identifier. In response to the component placement information indicating that the first component can be placed into the second component, the target identifier in the component placement information is set to the first identifier; in response to the component placement information indicating that the first component cannot be placed into the second component, the second identifier in the component placement information is set to the second identifier.

[0048] In practice, the first and second identifiers mentioned above have different styles. For example, the first identifier can be a green or blue checkmark, while the second identifier can be a red cross or a disabled identifier. The first and second identifiers can be displayed before or after the text information in the component placement information, where the text information indicates whether the first component can be placed inside the second component.

[0049] like Figure 5 The diagram shown is a display illustration of component placement information and component placement identifier provided in an embodiment of the present invention. Figure 5 The triangle icon at the input box of the form item in the middle page canvas is the mouse icon. When the first component is dragged and moved within the page canvas by the mouse, the first component can move with the movement of the mouse icon. The content in the gray box displayed at the position of the mouse icon (equivalent to the drag position mentioned above) is the component placement information. This component placement information includes the first icon and the text information that the button can be placed into the form item. Here, the button is the currently dragged first component, and the form item is the second component. Figure 5 The black insertion line displayed below the form item in the structure tree area (equivalent to the structure placeholder area mentioned above) is the component insertion identifier.

[0050] like Figure 6 The diagram shown is a display illustration of another component placement information and component placement identifier provided in an embodiment of the present invention. Figure 6 The content within the gray box displayed at the mouse cursor position is the component placement information. This component placement information includes a second identifier and text information within the form item that cannot be placed. Here, the button is the first component currently being dragged, and the form item is the second component. Figure 6The bold black dashed line displayed below the form items in the structure tree area indicates the component placement.

[0051] In another optional embodiment, the drag position responding to the drag operation is located at the component position of the second component in the page editing interface. The specific process of controlling the display of component placement information at the drag position may include: responding to the drag operation, the drag position is located at the hierarchical position of the second component in the structural placeholder area, displaying component placement information at the drag position, and displaying a component placement identifier at the position of the component model of the second component in the canvas area.

[0052] When the drag operation on the first component is performed at a position within the same hierarchy as the second component in the structural placeholder area, not only will component placement information be displayed at the dragged position, but a component placement indicator will also be displayed at the position of the second component in the canvas area. The display style of this indicator differs depending on whether the component placement information indicates that the first component can be placed with the second component or not. This method helps users intuitively understand the placement position, placement status, and placement hierarchy of the first component through the component placement information. Furthermore, the component placement indicator provides a more direct understanding of the first component's placement position.

[0053] like Figure 7 The diagram shown is a display illustration of another component placement information and component placement identifier provided in an embodiment of the present invention. Figure 7 The triangle marker at the form item in the structure tree area is the mouse marker. When the first component is dragged and moved within the structure tree area by the mouse, the first component can move along with the mouse marker. The content within the gray box at the mouse marker position is the component placement information, which includes the first marker and the text information of the button that can be placed into the form item. Here, the button is the currently dragged first component, and the form item is the second component. Figure 7 The black placement line displayed below the input box of the form field in the middle canvas area is the component placement indicator.

[0054] In the above method, when the position of a component is changed by dragging it with the mouse within the editor, the status feedback of the component's position structure can be displayed dynamically in real time. Within the visual editor, when a component is dragged and its position is adjusted, the placement position information and placement status of the component can be observed in real time by following the dragged component (i.e., following the mouse trajectory). This allows users to easily read the placement position structure and operation guidance in real time during the dragging process, improving the editor's user experience.

[0055] Corresponding to the above method embodiments, this invention also provides a component editing device that provides a page editing interface through a terminal device. This page editing interface includes multiple components located at different display levels, such as... Figure 8As shown, the device includes: The component movement module 80 is used to respond to a drag operation on the first component and control the first component to move in the page editing interface following the drag operation.

[0056] The information display module 81 is used to control the display of component placement information at the drag position in response to the drag operation being located at the component position of the second component in the page editing interface; wherein, the component placement information is used to indicate whether the first component can be placed into the second component.

[0057] The component placement module 82 is used to place the first component into the second component in response to the end of the drag operation if the component placement information indicates that the first component can be placed into the second component.

[0058] The aforementioned component editing device allows users to observe real-time prompts for component placement information as they drag components in the page editing interface. This method makes it easier for new users to adjust component positions and also improves the accuracy of page editing operations, reducing the cost of repeated trial and error caused by users' difficulty in distinguishing component hierarchical positions.

[0059] Furthermore, the above-mentioned device also includes a placement failure module, used to: if the component placement information indicates that the first component cannot be placed inside the second component, in response to the end of the drag operation, place the first component at a specified position in the page editing interface, and / or display a prompt message in the page editing interface; wherein the prompt message is used to indicate that the position adjustment of the first component has failed.

[0060] Furthermore, the aforementioned information display module 81 is used to: respond to the drag operation where the drag position is located at the component position of the second component in the page editing interface, determine the component placement information based on the component configuration information of the second component and the configuration information of the first component, and display the component placement information at the drag position.

[0061] Furthermore, the above configuration information is used to indicate: the component types that the component supports being placed and the component types that the component supports being placed.

[0062] Furthermore, the aforementioned page editing interface includes a canvas area and a structure placeholder area; wherein, the canvas area is used to display the component models of multiple components, and the structure placeholder area is used to display the hierarchical relationship of multiple components; the component position of the second component includes: the position of the component model of the second component in the canvas area, or the hierarchical position of the hierarchy to which the second component belongs in the structure placeholder area.

[0063] Furthermore, the aforementioned information display module 81 is also used to: respond to the position of the component model of the second component in the canvas area where the drag position is located in response to the drag operation, display component placement information at the drag position, and display component placement identifier at the layer position to which the second component belongs in the structure occupancy area.

[0064] Furthermore, the aforementioned information display module 81 is also used to: respond to the drag position of the drag operation being located at the hierarchical position of the second component in the structural occupancy area, display component placement information at the drag position, and display a component placement identifier at the position of the component model of the second component in the canvas area.

[0065] Furthermore, the aforementioned component placement information includes a target identifier. Based on this, the aforementioned device further includes an identifier display module, which is used to set the target identifier in the component placement information as a first identifier in response to the component placement information indicating that the first component can be placed into the second component; and to set the second identifier in the component placement information as a second identifier in response to the component placement information indicating that the first component cannot be placed into the second component.

[0066] The component editing device provided in this embodiment of the invention has the same implementation principle and technical effect as the aforementioned method embodiment. For the sake of brevity, any parts not mentioned in the device embodiment can be referred to the corresponding content in the aforementioned method embodiment.

[0067] This embodiment also provides an electronic device, including a processor and a memory. The memory stores computer-executable instructions that can be executed by the processor, and the processor executes the computer-executable instructions to implement the above-described component editing method. This electronic device can be a server or a terminal device.

[0068] See Figure 9 As shown, the electronic device includes a processor 100 and a memory 101. The memory 101 stores computer-executable instructions that can be executed by the processor 100. The processor 100 executes the computer-executable instructions to implement the above-described component editing method.

[0069] Specifically, a page editing interface is provided through a terminal device. The page editing interface includes multiple components located at different display levels. The component editing method includes: in response to a drag operation on a first component, controlling the first component to move within the page editing interface following the drag operation; in response to the drag position being located at the component position of a second component in the page editing interface, controlling the display of component placement information at the drag position; wherein, the component placement information is used to indicate whether the first component can be placed into the second component; if the component placement information indicates that the first component can be placed into the second component, in response to the end of the drag operation, placing the first component into the second component.

[0070] The above component editing method allows users to observe real-time prompts for component placement information as they drag components in the page editing interface. This method makes it easier for new users to adjust component positions and also improves the accuracy of page editing operations, reducing the cost of repeated trial and error caused by users' difficulty in distinguishing component hierarchy positions.

[0071] In an optional embodiment, the method further includes: if the component placement information indicates that the first component cannot be placed inside the second component, in response to the end of the drag operation, placing the first component at a specified position in the page editing interface, and / or displaying a prompt message in the page editing interface; wherein the prompt message is used to indicate that the position adjustment of the first component has failed.

[0072] In an optional embodiment, the step of controlling the display of component placement information at the drag position in response to the drag operation is located at the component position of the second component in the page editing interface. This step includes: determining the component placement information based on the component configuration information of the second component and the configuration information of the first component, and displaying the component placement information at the drag position.

[0073] In an optional embodiment, the above configuration information is used to indicate: the component types that the component supports being placed and the component types that the component supports being placed.

[0074] In an optional embodiment, the page editing interface includes a canvas area and a structure placeholder area; wherein, the canvas area is used to display the component models of multiple components, and the structure placeholder area is used to display the hierarchical relationship of multiple components; the component position of the second component includes: the position of the component model of the second component in the canvas area, or the hierarchical position of the hierarchy to which the second component belongs in the structure placeholder area.

[0075] In an optional embodiment, the step of controlling the display of component placement information at the drag position in response to the drag operation is located at the component position of the second component in the page editing interface. This step includes: displaying component placement information at the drag position in response to the drag operation at the position of the component model of the second component in the canvas area, and displaying a component placement identifier at the layer position of the second component in the structure placeholder area.

[0076] In an optional embodiment, the step of controlling the display of component placement information at the drag position in response to the drag operation is located at the component position of the second component in the page editing interface. This step includes: the drag position in response to the drag operation is located at the hierarchical position of the second component in the structural placeholder area, the component placement information is displayed at the drag position, and the component placement identifier is displayed at the position of the component model of the second component in the canvas area.

[0077] In an optional embodiment, the component placement information includes a target identifier. Based on this, the method further includes: in response to the component placement information indicating that the first component can be placed into the second component, setting the target identifier in the component placement information as the first identifier; in response to the component placement information indicating that the first component cannot be placed into the second component, setting the second identifier in the component placement information as the second identifier.

[0078] Furthermore, Figure 9 The electronic device shown also includes a bus 102 and a communication interface 103, with the processor 100, the communication interface 103 and the memory 101 connected via the bus 102.

[0079] The memory 101 may include high-speed random access memory (RAM) and may also include non-volatile memory, such as at least one disk storage device. Communication between this system network element and at least one other network element is achieved through at least one communication interface 103 (which can be wired or wireless), such as the Internet, wide area network, local area network, metropolitan area network, etc. The bus 102 may be an ISA bus, PCI bus, or EISA bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 9 The symbol is represented by a single double-headed arrow, but this does not mean that there is only one bus or one type of bus.

[0080] Processor 100 may be an integrated circuit chip with signal processing capabilities. In implementation, each step of the above method can be completed by the integrated logic circuitry in the hardware of processor 100 or by instructions in software form. Processor 100 may be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), etc.; it may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It can implement or execute the methods, steps, and logic block diagrams disclosed in the embodiments of this invention. The general-purpose processor may be a microprocessor or any conventional processor. The steps of the methods disclosed in the embodiments of this invention can be directly manifested as execution by a hardware decoding processor, or execution by a combination of hardware and software modules in the decoding processor. The software module can reside in a readily available storage medium in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, or registers. This storage medium is located in memory 101, and the processor 100 reads the information from memory 101 and, in conjunction with its hardware, completes the steps of the method described in the foregoing embodiments.

[0081] This embodiment also provides a computer-readable storage medium storing computer-executable instructions. When the computer-executable instructions are called and executed by a processor, the computer-executable instructions cause the processor to implement the above-described component editing method.

[0082] The computer-executable instructions stored in the aforementioned computer-readable storage medium can, by executing the aforementioned computer-executable instructions, perform the following operations in the aforementioned component editing method: Specifically, a page editing interface is provided through a terminal device. The page editing interface includes multiple components located at different display levels. The component editing method includes: in response to a drag operation on a first component, controlling the first component to move within the page editing interface following the drag operation; in response to the drag position being located at the component position of a second component in the page editing interface, controlling the display of component placement information at the drag position; wherein, the component placement information is used to indicate whether the first component can be placed into the second component; if the component placement information indicates that the first component can be placed into the second component, in response to the end of the drag operation, placing the first component into the second component.

[0083] The above component editing method allows users to observe real-time prompts for component placement information as they drag components in the page editing interface. This method makes it easier for new users to adjust component positions and also improves the accuracy of page editing operations, reducing the cost of repeated trial and error caused by users' difficulty in distinguishing component hierarchy positions.

[0084] In an optional embodiment, the method further includes: if the component placement information indicates that the first component cannot be placed inside the second component, in response to the end of the drag operation, placing the first component at a specified position in the page editing interface, and / or displaying a prompt message in the page editing interface; wherein the prompt message is used to indicate that the position adjustment of the first component has failed.

[0085] In an optional embodiment, the step of controlling the display of component placement information at the drag position in response to the drag operation is located at the component position of the second component in the page editing interface. This step includes: determining the component placement information based on the component configuration information of the second component and the configuration information of the first component, and displaying the component placement information at the drag position.

[0086] In an optional embodiment, the above configuration information is used to indicate: the component types that the component supports being placed and the component types that the component supports being placed.

[0087] In an optional embodiment, the page editing interface includes a canvas area and a structure placeholder area; wherein, the canvas area is used to display the component models of multiple components, and the structure placeholder area is used to display the hierarchical relationship of multiple components; the component position of the second component includes: the position of the component model of the second component in the canvas area, or the hierarchical position of the hierarchy to which the second component belongs in the structure placeholder area.

[0088] In an optional embodiment, the step of controlling the display of component placement information at the drag position in response to the drag operation is located at the component position of the second component in the page editing interface. This step includes: displaying component placement information at the drag position in response to the drag operation at the position of the component model of the second component in the canvas area, and displaying a component placement identifier at the layer position of the second component in the structure placeholder area.

[0089] In an optional embodiment, the step of controlling the display of component placement information at the drag position in response to the drag operation is located at the component position of the second component in the page editing interface. This step includes: the drag position in response to the drag operation is located at the hierarchical position of the second component in the structural placeholder area, the component placement information is displayed at the drag position, and the component placement identifier is displayed at the position of the component model of the second component in the canvas area.

[0090] In an optional embodiment, the component placement information includes a target identifier. Based on this, the method further includes: in response to the component placement information indicating that the first component can be placed into the second component, setting the target identifier in the component placement information as the first identifier; in response to the component placement information indicating that the first component cannot be placed into the second component, setting the second identifier in the component placement information as the second identifier.

[0091] The computer program products of the component editing method, apparatus and electronic device provided in the embodiments of the present invention include a computer-readable storage medium storing program code. The instructions included in the program code can be used to execute the methods described in the preceding method embodiments. For specific implementation, please refer to the method embodiments, which will not be repeated here.

[0092] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process of the system and apparatus described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0093] Furthermore, in the description of the embodiments of the present invention, unless otherwise explicitly specified and limited, the terms "installation," "connection," and "linking" should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral connection; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; and they can refer to the internal connection of two components. Those skilled in the art can understand the specific meaning of the above terms in the present invention based on the specific circumstances.

[0094] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0095] In the description of this invention, it should be noted that the terms "center," "upper," "lower," "left," "right," "vertical," "horizontal," "inner," and "outer," etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings. They are used only for the convenience of describing the invention and for simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on the invention. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and should not be construed as indicating or implying relative importance.

[0096] Finally, it should be noted that the above embodiments are merely specific implementations of the present invention, used to illustrate the technical solutions of the present invention, and not to limit it. The scope of protection of the present invention is not limited thereto. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments within the technical scope disclosed in the present invention, or make equivalent substitutions for some of the technical features; and these modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be covered within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A component editing method, characterized in that, The method includes providing a page editing interface via a terminal device, wherein the page editing interface includes multiple components located at different display levels. In response to a drag operation on the first component, the first component is controlled to move within the page editing interface following the drag operation; In response to the drag operation, the drag position is located at the component position of the second component in the page editing interface, and the component placement information is displayed at the drag position; wherein, the component placement information is used to indicate whether the first component can be placed into the second component; If the component placement information indicates that the first component can be placed into the second component, the first component is placed into the second component in response to the end of the drag operation.

2. The method according to claim 1, characterized in that, The method further includes: If the component placement information indicates that the first component cannot be placed inside the second component, in response to the end of the drag operation, the first component is placed at a specified position in the page editing interface, and / or a prompt message is displayed in the page editing interface; wherein the prompt message is used to indicate that the position adjustment of the first component has failed.

3. The method according to claim 1, characterized in that, The step of controlling the display of component placement information at the drag position in response to the drag operation, where the drag position is located at the component position of the second component in the page editing interface, includes: In response to the drag operation, the drag position is located at the component position of the second component in the page editing interface. Based on the component configuration information of the second component and the configuration information of the first component, the component placement information is determined and displayed at the drag position.

4. The method according to any one of claims 1-3, characterized in that, The page editing interface includes a canvas area and a structure placeholder area; wherein, the canvas area is used to display the component models of multiple components, and the structure placeholder area is used to display the hierarchical relationship of the multiple components; the component position of the second component includes: the position of the component model of the second component in the canvas area, or the hierarchical position of the hierarchy to which the second component belongs in the structure placeholder area.

5. The method according to claim 4, characterized in that, The step of controlling the display of component placement information at the drag position in response to the drag operation, where the drag position is located at the component position of the second component in the page editing interface, includes: In response to the drag operation, the drag position is located at the position of the component model of the second component in the canvas area. Component placement information is displayed at the drag position, and a component placement identifier is displayed at the layer position to which the second component belongs in the structure placeholder area.

6. The method according to claim 4, characterized in that, The step of controlling the display of component placement information at the drag position in response to the drag operation, where the drag position is located at the component position of the second component in the page editing interface, includes: In response to the drag operation, the drag position is located at the hierarchical position of the second component in the structural placeholder area. Component placement information is displayed at the drag position, and a component placement identifier is displayed at the position of the component model of the second component in the canvas area.

7. The method according to claim 1, characterized in that, The component placement information includes a target identifier, and the method further includes: In response to the component placement information indicating that the first component can be placed into the second component, the target identifier in the component placement information is set to the first identifier; In response to the component placement information indicating that the first component cannot be placed into the second component, the second identifier in the component placement information is set to the second identifier.

8. A component editing device, characterized in that, A page editing interface is provided through a terminal device, the page editing interface including multiple components located at different display levels, the device comprising: A component movement module is used to respond to a drag operation on a first component and control the first component to move in the page editing interface following the drag operation; An information display module is used to control the display of component placement information at the drag position in response to the drag operation being located at the component position of the second component in the page editing interface; wherein, the component placement information is used to indicate whether the first component can be placed into the second component; A component placement module is configured to place the first component into the second component in response to the end of the drag operation if the component placement information indicates that the first component can be placed into the second component.

9. An electronic device, characterized in that, The electronic device includes a processor and a memory, the memory storing computer-executable instructions that can be executed by the processor, the processor executing the computer-executable instructions to implement the component editing method according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when invoked and executed by a processor, cause the processor to implement the component editing method according to any one of claims 1-7.

Images