A method and device for hiding a floating design toolbar of a low-code platform

Abstract

The application provides a hiding method and device for a low-code platform floating design toolbar, a phantom parent container is decorated for each page element needing to present a design toolbar, when a mouse-over event is triggered, the design toolbar of all parent nodes (including the corresponding phantom parent container) is hidden in a hidden manner, so that only the design toolbar of the current page element is displayed, therefore, for the user, it is equivalent to that the design toolbar of all parent nodes of the current page element does not bubble. Therefore, the effect of the display and hiding control of the design toolbar of only a single node is realized, and the design toolbars of each parent node do not need to be displayed and interfere with each other. Moreover, the mouse-over event and the mouse-out event are used for control, the page element click event can be kept in the visual development to achieve the interaction consistency of the design state and the running state, which greatly facilitates the development.

Description

Technical Field

[0001] This invention relates to low-code platforms, and more particularly to a method and apparatus for hiding a floating design toolbar on a low-code platform. Background Technology

[0002] In a visual design-oriented scenario within low-code platform development, interface elements (such as text input boxes, content blocks, etc.) need to present a toolbar for design operations, hereinafter referred to as the "design toolbar". For example... Figure 1 As shown, the toolbar is used to perform design operations such as dragging, deleting, and configuring properties of interface elements. The common design operations of the toolbar are implemented in the following two ways:

[0003] The first method involves a pre-defined, globally unique design toolbar. Each page element that needs to display the design toolbar is assigned a specific style name or decorated with a specific parent container. When a page element is clicked, if it is a page element that meets the criteria, the design toolbar is floated and displayed near the page element through the style's position control (commonly known as bubbling). For example, the upper right corner frame is the bubbling design toolbar, which contains design tools such as dragging, property configuration, and deletion.

[0004] However, the drawback of this implementation method is that the click events of page elements are used to trigger the floating design toolbar, while the clicks of page elements that have actual functional meaning cannot be implemented in design mode. For example, clicking the query button can realize the function of querying data in runtime mode, but in design mode, it can only realize the bubble function of the design toolbar. In visual development, it is impossible to achieve consistent interaction between design mode and runtime (preview mode).

[0005] The second method: The program decorates each page element that needs to display the design toolbar with a specific parent container, and this parent container has the same style class name (e.g., `designable-bar`). This parent container includes the design toolbar. A hover style is configured for the parent container's style class name using CSS (e.g., "Show Design Toolbar"). When the mouse moves over the page element, as shown... Figure 2 As shown, all page elements that meet the specified criteria (i.e., the current page element and all its parent page elements) will display the design toolbar, i.e., the toolbar will bubble from child to parent.

[0006] Obviously, the drawback of this implementation is that CSS styles cannot control hover bubbling (prevent bubbling). So, in addition to the page element that the mouse is currently pointing to triggering hover, its parent page element and all parent page elements above it that meet the conditions also trigger hover, resulting in a poor page visual effect. For example, the design toolbars of page elements that are close to each other will obscure each other, making the whole page cluttered and difficult to operate. Summary of the Invention

[0007] The technical problem to be solved by the present invention is to provide a method and device for hiding a floating design toolbar on a low-code platform, which can both achieve the style of displaying only one design toolbar of the current page element when the mouse moves or hovers between page elements, and retain the click events of the elements that have actual functional significance.

[0008] In a first aspect, the present invention provides a method for hiding a floating design toolbar on a low-code platform, comprising the following steps:

[0009] S1. Each page element that needs to display the design toolbar is decorated with an invisible parent container, and the invisible parent container has the same style class name as the corresponding page element. The invisible parent container includes the design toolbar.

[0010] S2. Configure the style class name of the invisible parent container as a hidden attribute using CSS styles;

[0011] S3. Listen for mouse hover and mouse out events of all page elements and their corresponding invisible parent containers.

[0012] When the mouse hovers over any page element A and its corresponding invisible parent container B, the mouse hover event is handled as follows: First, the design toolbars of page element A and its corresponding invisible parent container B are set to be visible; then, taking page element A as the last-level node, all parent nodes containing design toolbars are recursively searched upwards, and all parent nodes, including the design toolbars of their corresponding invisible parent containers B, are hidden; then, the mouse hover event is set to stop bubbling.

[0013] When the mouse moves out of page element A and its corresponding invisible parent container B, handle the mouse out event: hide the design toolbar of page element A and set the mouse out event to stop bubbling.

[0014] Secondly, the present invention provides a hiding device for a floating design toolbar on a low-code platform, comprising:

[0015] The decoration module decorates each page element that needs to display the design toolbar with an invisible parent container, and the invisible parent container has the same style class name as the corresponding page element. The invisible parent container includes the design toolbar.

[0016] The configuration module uses CSS styles to uniformly configure the style class name of the invisible parent container as a hidden attribute;

[0017] The listener module is used to listen for mouse hover and mouse out events of all page elements and their corresponding invisible parent containers.

[0018] The mouseover event handling module is used to handle mouseover events when the mouse passes over any page element A and its corresponding invisible parent container B: First, the design toolbars of page element A and its corresponding invisible parent container B are set to be displayed; then, taking page element A as the last-level node, all parent nodes containing design toolbars are recursively searched upwards, and all parent nodes, including the design toolbars of their corresponding invisible parent containers B, are hidden; finally, the mouseover event is set to stop bubbling.

[0019] The mouse-out event handling module is used to handle mouse-out events when the mouse moves out of page element A and its corresponding invisible parent container B: hide the design toolbar of page element A and set the mouse-out event to stop bubbling.

[0020] The one or more technical solutions provided in this invention embodiment have at least the following technical effects or advantages: Each page element that needs to display a design toolbar is decorated with an invisible parent container (for example, a parent container identical to the original page element can be nested on top of the page element, making its existence invisible). These containers are set to the same style class name and uniformly configured as hidden. When the mouse hover event is triggered, in principle, the design toolbars of the current page element and its parent nodes should bubble up. However, because this invention hides the design toolbars of all parent nodes (including the corresponding invisible parent containers) by hiding them, only the design toolbar of the current page element is displayed. Therefore, for the user, it is equivalent to none of the design toolbars of the current page element's parent nodes bubbling up. When the mouse leave event is triggered, the design toolbar of the current page element is simply hidden again. This achieves the effect of controlling the display and hiding of the design toolbar for only a single node. Throughout the entire process, the display and hiding of the design toolbars of all parent nodes are completely imperceptible to the user.

[0021] As can be seen, this invention enables the display and hiding of the design toolbar for individual node page elements without requiring each parent node's design toolbar to be displayed, thus avoiding interference. Furthermore, by using mouse hover and mouse leave events for control, it preserves page element click events, ensuring consistent interaction between design and runtime (preview) states in visual development, greatly simplifying the development process.

[0022] The above description is merely an overview of the technical solution of the present invention. In order to better understand the technical means of the present invention and to implement it in accordance with the contents of the specification, and in order to make the above and other objects, features and advantages of the present invention more apparent and understandable, specific embodiments of the present invention are described below. Attached Figure Description

[0023] The present invention will be further described below with reference to the accompanying drawings and embodiments.

[0024] Figure 1 A schematic diagram showing the display status of a design toolbar for a UI element on a low-code platform;

[0025] Figure 2 This is a diagram showing the state when the design toolbar of a UI element and its parent node are both displayed on a low-code platform.

[0026] Figure 3 This is a flowchart of the method in Embodiment 1 of the present invention;

[0027] Figure 4 This is a schematic diagram of the overlapping state of page elements and their corresponding invisible parent containers in an embodiment of the present invention;

[0028] Figure 5 This is a schematic diagram illustrating the principle of mouse event handling in an embodiment of the present invention;

[0029] Figure 6 This is a schematic diagram illustrating the principle of mouse moveout event handling in an embodiment of the present invention;

[0030] Figure 7 This is a schematic diagram of the device in Embodiment 2 of the present invention. Detailed Implementation

[0031] This application provides a method and apparatus for hiding a floating design toolbar on a low-code platform. This method enables the display of only one design toolbar for the current page element when the mouse moves or hovers between page elements, while also preserving the click events that have practical functional meaning for the elements themselves.

[0032] The technical solution in this application embodiment follows the general idea as follows: Each page element that needs to display its design toolbar is decorated with an invisible parent container (for example, a parent container identical to the original page element can be nested on top of the page element, making its existence invisible). These containers are then set to the same style class name and uniformly configured as hidden. When a mouse hover event is triggered, the design toolbars of the current page element and its parent nodes should, in principle, bubble up. However, because this invention hides the design toolbars of all parent nodes (including the corresponding invisible parent containers), only the design toolbar of the current page element is displayed. Therefore, for the user, it is equivalent to none of the design toolbars of the current page element's parent nodes bubbling up. When a mouse leave event is triggered, the design toolbar of the current page element is simply hidden again. This achieves the effect of controlling the visibility of the design toolbar for a single node. Throughout the entire process, the display and hiding of the design toolbars of all parent nodes are completely imperceptible to the user.

[0033] As can be seen, this invention enables the display and hiding of the design toolbar for individual node page elements without requiring each parent node's design toolbar to be displayed, thus avoiding interference. Furthermore, by using mouse hover and mouse leave events for control, it preserves page element click events, ensuring consistent interaction between design and runtime (or preview) states in visual development, greatly simplifying the development process.

[0034] Example 1

[0035] like Figure 3 As shown, this embodiment provides a method for hiding a floating design toolbar on a low-code platform, including the following steps:

[0036] S1. Each page element that needs to display the design toolbar is decorated with an invisible parent container, and the invisible parent container has the same style class name as the corresponding page element. The invisible parent container includes the design toolbar.

[0037] S2. Configure the style class name of the invisible parent container as a hidden attribute using CSS styles;

[0038] S3. Listen for mouse hover and mouse out events of all page elements and their corresponding invisible parent containers.

[0039] When the mouse hovers over any page element A and its corresponding invisible parent container B, the mouse hover event is handled as follows: First, the design toolbars of page element A and its corresponding invisible parent container B are set to be visible; then, taking page element A as the last-level node, all parent nodes containing design toolbars are recursively searched upwards, and all parent nodes, including the design toolbars of their corresponding invisible parent containers B, are hidden; then, the mouse hover event is set to stop bubbling.

[0040] When the mouse moves out of page element A and its corresponding invisible parent container B, handle the mouse out event: hide the design toolbar of page element A and set the mouse out event to stop bubbling.

[0041] A and B are used only to describe convenient naming and have no actual meaning.

[0042] The invisible parent container is exactly the same size and shape as the corresponding page element. When the mouse moves over any page element, it will also move over the corresponding invisible parent container. When the mouse moves out of any page element, it will also move out of the corresponding invisible parent container.

[0043] For example:

[0044] like Figure 4 The diagram shows the overlapping state of a page element and an invisible parent container. For ease of explanation, the border of the invisible parent container is drawn larger and represented by a dashed line. In practice, the border of the invisible parent container is the same size and shape as the border of the page element, thus ensuring that the triggering of mouse hover events and mouse leave events is exactly the same for both.

[0045] like Figure 5 As shown, suppose page element A originally had two parent containers C and D recursively upwards. When page element A decorates a corresponding invisible parent container B, then parent containers C and D also become the parent containers of the invisible parent container B.

[0046] When the mouse hovers over any page element A and its corresponding invisible parent container B, since page element A and its corresponding invisible parent container B have the same border size and shape, when the mouse hovers over any page element A, it also hovers over its corresponding invisible parent container B. Therefore, the mouse hover events of page element A and its corresponding invisible parent container B are both triggered. At this time, according to the original design of the low-code platform, the design toolbars of page element A, its corresponding invisible parent container B, and all their parent containers will be displayed.

[0047] To prevent the design toolbars of all the original parent containers C and D of page element A from being displayed, the mouse hover event is handled as follows: First, the design toolbars of page element A and its corresponding invisible parent container B are set to be displayed; then, taking page element A as the last-level node, all parent nodes containing design toolbars are recursively searched upwards, which will inevitably find the corresponding invisible parent container B. At this point, all the found parent nodes, including the design toolbars of the corresponding invisible parent container B, are hidden; then, the mouse hover event is set to stop bubbling.

[0048] like Figure 6 As shown, when the mouse moves out of page element A and its corresponding invisible parent container B, the mouse out event is handled by hiding the design toolbar of page element A and setting the mouse out event to stop bubbling.

[0049] Based on the same inventive concept, this application also provides an apparatus corresponding to the method in Embodiment 1, as detailed in Embodiment 2.

[0050] Example 2

[0051] like Figure 7 As shown, this embodiment provides a hiding device for a floating design toolbar on a low-code platform, including:

[0052] The decoration module decorates each page element that needs to display the design toolbar with an invisible parent container, and the invisible parent container has the same style class name as the corresponding page element. The invisible parent container includes the design toolbar.

[0053] The configuration module uses CSS styles to uniformly configure the style class name of the invisible parent container as a hidden attribute;

[0054] The listener module is used to listen for mouse hover and mouse out events of all page elements and their corresponding invisible parent containers.

[0055] The mouseover event handling module is used to handle mouseover events when the mouse passes over any page element A and its corresponding invisible parent container B: First, the design toolbars of page element A and its corresponding invisible parent container B are set to be displayed; then, taking page element A as the last-level node, all parent nodes containing design toolbars are recursively searched upwards, and all parent nodes, including the design toolbars of their corresponding invisible parent containers B, are hidden; finally, the mouseover event is set to stop bubbling.

[0056] The mouse-out event handling module is used to handle mouse-out events when the mouse moves out of page element A and its corresponding invisible parent container B: hide the design toolbar of page element A and set the mouse-out event to stop bubbling.

[0057] The invisible parent container is exactly the same size and shape as the corresponding page element. When the mouse passes over any page element, it will also pass over the corresponding invisible parent container. When the mouse moves out of any page element, it will also move out of the corresponding invisible parent container.

[0058] For example:

[0059] like Figure 4 The diagram shows the overlapping state of a page element and an invisible parent container. For ease of explanation, the border of the invisible parent container is drawn larger and represented by a dashed line. In practice, the border of the invisible parent container is the same size and shape as the border of the page element, thus ensuring that the triggering of mouse hover events and mouse leave events is exactly the same for both.

[0060] like Figure 5 As shown, suppose page element A originally had two parent containers C and D recursively upwards. When page element A decorates a corresponding invisible parent container B, then parent containers C and D also become the parent containers of the invisible parent container B.

[0061] When the mouse hovers over any page element A and its corresponding invisible parent container B, since page element A and its corresponding invisible parent container B have the same border size and shape, when the mouse hovers over any page element A, it also hovers over its corresponding invisible parent container B. Therefore, the mouse hover events of page element A and its corresponding invisible parent container B are both triggered. At this time, according to the original design of the low-code platform, the design toolbars of page element A, its corresponding invisible parent container B, and all their parent containers will be displayed.

[0062] To prevent the design toolbars of all the original parent containers C and D of page element A from being displayed, the mouse hover event is handled as follows: First, the design toolbars of page element A and its corresponding invisible parent container B are set to be displayed; then, taking page element A as the last-level node, all parent nodes containing design toolbars are recursively searched upwards, which will inevitably find the corresponding invisible parent container B. At this point, all the found parent nodes, including the design toolbars of the corresponding invisible parent container B, are hidden; then, the mouse hover event is set to stop bubbling.

[0063] like Figure 6 As shown, when the mouse moves out of page element A and its corresponding invisible parent container B, the mouse out event is handled by hiding the design toolbar of page element A and setting the mouse out event to stop bubbling.

[0064] Since the apparatus described in Embodiment 2 of the present invention is an apparatus used to implement the method of Embodiment 1 of the present invention, those skilled in the art can understand the specific structure and variations of the apparatus based on the method described in Embodiment 1 of the present invention, and therefore will not be described again here. All apparatuses used in the method of Embodiment 1 of the present invention fall within the scope of protection of the present invention.

[0065] The method and apparatus provided in this application have at least the following technical effects or advantages: The present invention can display and hide the design toolbar of page elements on a single node without requiring each parent node's design toolbar to be displayed, thus avoiding mutual interference. Furthermore, by using mouse hover and mouse leave events for control, it preserves page element click events, ensuring consistent interaction between design state and runtime state (or preview state) in visual development, greatly facilitating development.

[0066] While specific embodiments of the present invention have been described above, those skilled in the art should understand that the specific embodiments described are merely illustrative and not intended to limit the scope of the present invention. Equivalent modifications and variations made by those skilled in the art in accordance with the spirit of the present invention should be covered within the scope of protection of the claims of the present invention.

Claims

1. A method for hiding a floating design toolbar of a low-code platform, characterized in that: The method comprises the following steps: S1, each page element requiring a design toolbar is decorated with a hidden parent container, and the hidden parent container has a same style class name as the corresponding page element, and the hidden parent container comprises the design toolbar; S2, the style class name of the hidden parent container is uniformly configured as a hidden attribute through a CSS style; S3, mouse-over events and mouse-out events of all page elements and corresponding hidden parent containers are listened to; When the mouse-over events of any page element A and the corresponding hidden parent container B are listened to, the mouse-over events are processed as follows: the design toolbar of the page element A and the corresponding hidden parent container B is set to be displayed; all parent nodes including the design toolbar are recursively searched upwards from the page element A as the last level node, and the design toolbar of all parent nodes including the corresponding hidden parent container B is hidden; and the mouse-over events are set to stop bubbling; When the mouse-out events of the page element A and the corresponding hidden parent container B are listened to, the mouse-out events are processed as follows: the design toolbar of the page element A is hidden, and the mouse-out events are set to stop bubbling.

2. The method of claim 1, wherein the low-code platform floating design toolbar is hidden. The hidden parent container has the same size and shape as the corresponding page element, and when the mouse passes through any page element, the corresponding hidden parent container is also passed through, and when the mouse moves out of any page element, the corresponding hidden parent container is also moved out.

3. A low-code platform for hiding a floating design toolbar, the method comprising: The method comprises: a decoration module, each page element requiring a design toolbar is decorated with a hidden parent container, and the hidden parent container has a same style class name as the corresponding page element, and the hidden parent container comprises the design toolbar; a configuration module, the style class name of the hidden parent container is uniformly configured as a hidden attribute through a CSS style; a listening module, for listening to mouse-over events and mouse-out events of all page elements and corresponding hidden parent containers; a mouse-over event processing module, for processing the mouse-over events when the mouse-over events of any page element A and the corresponding hidden parent container B are listened to: the design toolbar of the page element A and the corresponding hidden parent container B is set to be displayed; all parent nodes including the design toolbar are recursively searched upwards from the page element A as the last level node, and the design toolbar of all parent nodes including the corresponding hidden parent container B is hidden; and the mouse-over events are set to stop bubbling; a mouse-out event processing module, for processing the mouse-out events when the mouse-out events of the page element A and the corresponding hidden parent container B are listened to: the design toolbar of the page element A is hidden, and the mouse-out events are set to stop bubbling.

4. The device according to claim 3, wherein: The hidden parent container has the same size and shape as the corresponding page element, and when the mouse passes through any page element, the corresponding hidden parent container is also passed through, and when the mouse moves out of any page element, the corresponding hidden parent container is also moved out.

Images