Background
The application designer is a tool for helping a user to develop applications rapidly in the Internet of things cloud platform, and equipment data visualization is achieved. When the page design of the existing application designer is carried out, the canvas is positioned by adopting the following two implementation schemes: 1. absolute positioning is realized, and a user is supported to drag a control to any position; 2. the method is a streaming layout, and supports the arrangement of user drag controls according to a streaming layout mode;
both the two modes have limitations, when absolute positioning is adopted, and when a certain component is judged to be hidden by a service, the layout is not recalculated, the blank of the hidden component area can appear, and the height of the component cannot be adaptively unfolded according to the content; the adoption of the stream layout can not support the user to randomly place the elements to any position, so that the use is complex, and the layout design capability is required.
Disclosure of Invention
Therefore, the invention aims to provide a canvas positioning method combining absolute positioning and stream positioning, which realizes compatible use of two modes of absolute positioning and stream layout and can effectively improve the efficiency of application design.
In order to achieve the above purpose, the invention adopts the following technical scheme:
a canvas positioning method combining absolute positioning and stream positioning comprises the following steps:
setting canvas of application designer as absolute positioning position: an absolute;
opening up a region in canvas to be specially used as a stream layout space, and associating stream fragments through a container component built in an application designer;
the specified streaming fragment is load rendered by dragging the container component to the specified region in the absolute canvas and by the container component.
Further, the canvas sets a parent node as position: relative, and a child node as position: absolute.
Further, the streaming layout space realizes the streaming layout of the page by adopting an element-plus layout container component, which is specifically as follows:
rendering by dividing a page line into 24 parts through < el-row >, and rendering elements in proportion by setting < el-col > span attribute under < el-row > nested < el-col >;
in a container component, setting a container component parent node to a position: the absolute is used as absolute positioning to drag any position of the container assembly, child nodes of the absolute are rendered by adopting the < el-row > assembly, and then control information in the fragment is rendered under the el-row label by using the < el-col > label through a designated fragment configuration item.
Further, all the fragment information of the current application is traversed and read and displayed to the user for selection in a tree form, the user reads the configuration information of the fragments through selecting the corresponding fragments, and the container component renders the fragment content according to the types of the fragments.
The canvas positioning system combining absolute positioning and stream positioning comprises a processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface complete mutual communication through the communication bus; the memory is configured to store at least one executable instruction that causes the processor to:
setting canvas of application designer as absolute positioning position: an absolute;
opening up a region in canvas to be specially used as a stream layout space, and associating stream fragments through a container component built in an application designer;
the specified streaming fragment is load rendered by dragging the container component to the specified region in the absolute canvas and by the container component.
A computer storage medium storing a plurality of instructions adapted to be loaded by a processor and to perform the method steps as described above.
Compared with the prior art, the invention has the following beneficial effects:
the invention supports absolute positioning, so that a user can drag a control to any position, and meanwhile, the user can arrange the components in a stream layout mode, and when the supporting components are hidden, other components can be rearranged without blank areas, so that the construction of low-code application is clearer, more convenient and faster.
Drawings
FIG. 1 is a schematic flow chart of the method of the present invention;
FIG. 2 is a schematic diagram of a system according to an embodiment of the invention.
Detailed Description
The invention will be further described with reference to the accompanying drawings and examples.
Referring to fig. 1, the present invention provides a canvas positioning method combining absolute positioning and stream positioning, comprising the following steps:
setting canvas of application designer as absolute positioning position: an absolute;
opening up a region in canvas to be specially used as a stream layout space, and associating stream fragments through a container component built in an application designer;
the specified streaming fragment is load rendered by dragging the container component to the specified region in the absolute canvas and by the container component.
In this embodiment, the canvas sets the parent node to position: relative and the child node to position: absolute. The canvas can then be positioned in absolute terms based on the parent node.
In this embodiment, the streaming layout space implements the streaming layout of the page by using the element-plus layout container component, as follows:
rendering by dividing a page line into 24 parts through < el-row >, and rendering elements in proportion by setting < el-col > span attribute under < el-row > nested < el-col >;
in a container component, setting a container component parent node to a position: the absolute positioning of the absolute is used for dragging any position of a container component, sub-nodes of the absolute are rendered by adopting a < el-row > component, then control information in a segment is rendered under an el-row label by using a < el-col > label through a specified segment configuration item, and therefore the container can be randomly dragged based on a page, and the components in the container are displayed in a layout mode according to rules.
In this embodiment, the acquisition of the designated fragment is specifically as follows: and traversing and reading all the fragment information of the current application, displaying the fragment information to a user for selection in a tree form, reading the configuration information of the fragment by the user through selecting the corresponding fragment, and rendering the fragment content according to the type of the fragment through a container component.
Referring to fig. 2, the present invention further provides a canvas positioning system combining absolute positioning and stream positioning, comprising a processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface complete communication with each other through the communication bus; the memory is configured to store at least one executable instruction that causes the processor to: