Component drawing method, device, electronic device and storage medium

Abstract

The present invention relates to the field of computer technology, and provides a method, device, electronic device and storage medium for drawing components, the method comprising: determining a first metadata description corresponding to at least one selected component; parsing the first metadata description corresponding to each selected component to obtain a tree object structure of the selected component matching a development page; determining the boundaries of each selected component and the interaction anchor points of each selected component based on a second metadata description; and drawing the boundaries and interaction anchor points of the selected component selected by the user on the development page in response to a user's selection operation instruction for the selected component. The present invention realizes the use of metadata description to simplify the development of the drag interaction function of the component, thereby improving the development efficiency and development quality.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a component drawing method, device, electronic device and storage medium. Background Art

[0002] In order to enable users to interact with various components on the page by dragging and dropping them, a low-code and no-code technology solution is introduced. Existing low-code and no-code technology solutions require developing a set of components in the actual runtime code, and then developing another set of component code in the low-code designer to enable the selection and dragging of components. In this way, using a large amount of code to develop two sets of components to achieve the selection and dragging capabilities of components requires a lot of manpower and time, which reduces R&D efficiency. In addition, the implementation during design is heavily dependent on the specific structure and requirements of each component at runtime. When the software system is iteratively upgraded, it is easy for the complex functional points of both parties to cause inconsistent data and interfaces, thus causing quality problems. Summary of the Invention

[0003] The present invention provides a component drawing method, device, electronic device and storage medium, which are used to solve the defects in the prior art of writing a large amount of code to realize the drag-and-drop interaction capability of components, which reduces the development efficiency and quality of R&D, and realizes the use of metadata description to simplify the development of the drag-and-drop interaction function of components, thereby improving development efficiency and quality.

[0004] The present invention provides a drawing method for a component, comprising the following steps:

[0005] Determining a first metadata description corresponding to at least one candidate component;

[0006] Parsing the first metadata description corresponding to each of the candidate components to obtain a tree object structure of the candidate components that matches the development page; the development page is a page where a user selects and / or drags the candidate components; the tree object structure is used to represent the hierarchical relationship between the candidate components; the tree object structure includes the second metadata description of each of the candidate components;

[0007] Based on the second metadata description, a boundary of each of the components to be selected and an interaction anchor point of each of the components to be selected are determined; the boundary is used by a user to select the component to be selected and drag it; the interaction anchor point is used by the user to perform an editing operation on the component to be selected in the development page, the editing operation including at least one of the following: deletion, addition, merging, and scaling;

[0008] In response to a user's selection operation instruction for the to-be-selected component, a boundary and an interaction anchor point of the to-be-selected component selected by the user are drawn on the development page.

[0009] According to a component drawing method provided by the present invention, the first metadata description corresponding to each of the candidate components is parsed to obtain a tree object structure of the candidate components that matches the development page, including: parsing the first metadata description corresponding to each of the candidate components to obtain a second metadata description of each of the candidate components that matches the development page; numbering the second metadata description of each of the candidate components to obtain a numbered second metadata description; storing the numbered second metadata description in a tree structure in the running environment of the browser corresponding to the development page to obtain the tree object structure of the candidate components that matches the development page.

[0010] According to a component drawing method provided by the present invention, the boundary of each of the candidate components and the interaction anchor point of each of the candidate components are determined based on the second metadata description, including: when the candidate component is rendered in the browser, determining the size information corresponding to the candidate component and the position information corresponding to the candidate component; based on the size information, the position information and the coordinate system of the browser, determining the boundary of the candidate component; based on the boundary of the candidate component, determining the interaction anchor point of each of the candidate components.

[0011] According to a component drawing method provided by the present invention, determining a first metadata description corresponding to at least one candidate component includes: extracting a third metadata description corresponding to each candidate component from the at least one candidate component; and adding component information that can be dragged into the corresponding candidate component to each third metadata description to obtain a first metadata description corresponding to each candidate component.

[0012] According to a component drawing method provided by the present invention, the component information of the corresponding dragged-in component of the candidate component is added to each of the third metadata descriptions to obtain the first metadata description corresponding to each of the candidate components, including: obtaining a requirements table of the development page; based on the requirements table, determining the dragged-in component that can be accepted for each of the candidate components; and adding the component information of the dragged-in component that can be accepted to the third metadata description to obtain the first metadata description corresponding to each of the candidate components.

[0013] According to a component drawing method provided by the present invention, the boundary and interaction anchor point of the candidate component selected by the user are drawn on the development page, including: determining that the browser recognizes the candidate component selected by the user; combining the candidate component selected by the user and the first metadata description corresponding to the candidate component selected by the user, and drawing the boundary and interaction anchor point of the candidate component selected by the user on the development page.

[0014] According to a component drawing method provided by the present invention, after drawing the boundary and interaction anchor point of the selected component selected by the user on the development page, the method further includes: editing the selected component in response to the user's operation on the interaction anchor point, and displaying the page component layout after the user editing on the development page.

[0015] The present invention also provides a drawing device for components, comprising the following modules:

[0016] A first determining module, configured to determine a first metadata description corresponding to at least one to-be-selected component;

[0017] a parsing module, configured to parse the first metadata description corresponding to each of the candidate components to obtain a tree object structure of the candidate components that matches a development page, wherein the development page is a page on which a user selects and / or drags the candidate components; the tree object structure is configured to represent a hierarchical relationship between the candidate components; and the tree object structure includes a second metadata description of each of the candidate components;

[0018] A boundary and an interaction anchor point of each of the components to be selected; the boundary is used by a user to select the component to be selected and drag it; the interaction anchor point is used by the user to perform an editing operation on the component to be selected in the development page, and the editing operation includes at least one of the following: delete, add, merge, and scale;

[0019] The display module is configured to draw the boundary and interaction anchor point of the to-be-selected component selected by the user on the development page in response to the user's selection operation instruction for the to-be-selected component.

[0020] The present invention also provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements any of the above-described component drawing methods when executing the computer program.

[0021] The present invention further provides a non-transitory computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the computer program implements any of the above-mentioned component drawing methods.

[0022] The present invention further provides a computer program product, comprising a computer program, wherein when the computer program is executed by a processor, the computer program implements any one of the above-mentioned component drawing methods.

[0023] The present invention provides a component drawing method, device, electronic device, and storage medium. The method determines the first metadata description corresponding to each candidate component; parses and processes the first data description corresponding to each candidate component to obtain a tree object structure of the candidate component that matches the development page; determines the boundaries of each candidate component and the interaction anchor points of each candidate component based on the second metadata description of the candidate component in the tree object structure; and after the user selects the candidate component, draws the boundaries and interaction anchor points of the candidate component selected by the user on the development page. In this way, by simply parsing the metadata description corresponding to the candidate component, the boundaries and interaction anchor points of the component that the user drags can be obtained for user operation, simplifying the development process and improving development efficiency. In addition, the component dragging interaction capability achieved through the metadata description means that the components displayed on the canvas during design do not need to rely on the components at runtime. The two are independent of each other, improving the maintainability of the software system. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] In order to more clearly illustrate the technical solutions in the present invention or the prior art, a brief introduction is given below to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0025] Figure 1 This is one of the flow charts of the component drawing method provided by the present invention.

[0026] Figure 2 This is a schematic diagram of the principle of extracting the first metadata description corresponding to the candidate component provided by the present invention.

[0027] Figure 3 This is a schematic diagram of the principle of drawing the boundaries and interaction anchor points of the selected components provided by the present invention.

[0028] Figure 4 It is a structural schematic diagram of a drawing device for components provided by the present invention.

[0029] Figure 5 It is a schematic diagram of the physical structure of the electronic device provided by the present invention. DETAILED DESCRIPTION

[0030] To make the objectives, technical solutions, and advantages of the present invention more clear, the technical solutions of the present invention will be clearly and completely described below in conjunction with the accompanying drawings. Obviously, the embodiments described are only some of the embodiments of the present invention, not all of them. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts shall fall within the scope of protection of the present invention.

[0031] Currently, Customer Relationship Management (CRM) applications driven by Platform as a Service (PASS) metadata face the following problems after the introduction of low-code and no-code technical solutions: The integration of all front-end components requires coders to write a large amount of code by hand to implement various drag-and-drop interactions and capabilities of various components, resulting in low development efficiency; two sets of manpower are required to maintain runtime components and components displayed on the design canvas respectively. The design implementation is heavily dependent on the specific structure and requirements of each component at runtime. When the software system is iteratively upgraded, it is easy to cause data and interface inconsistencies due to the complex functional points of both sides, which has a high probability of causing quality problems; for old components developed using React, adapting them to the designer still requires a lot of development work.

[0032] Based on the above problems, the present invention provides a component drawing method. By simply parsing the metadata description corresponding to the selected component, the boundaries and interaction anchor points of the component that the user can drag can be obtained for user operation, which simplifies the development process and improves development efficiency. In addition, the component drag interaction capability realized by the metadata description does not require the components displayed on the canvas during design to rely on the components at runtime. The two are independent of each other, which improves the maintainability of the software system.

[0033] The following combination Figure 1-Figure 3 The present invention describes a component-specific drawing method applicable to components and pages developed using any framework. This method can be executed by an electronic device or a component-specific drawing device within the electronic device. The component-specific drawing device can be implemented using software, hardware, or a combination of both.

[0034] Figure 1 This is one of the flow charts of the component drawing method provided by the present invention, such as Figure 1 As shown, the method includes the following:

[0035] Step 101: Determine a first metadata description corresponding to at least one candidate component.

[0036] The first metadata description provides important information about the component, such as component name, component properties, etc.

[0037] Here, the component to be selected can be a component independently developed by the staff based on any framework, or can be downloaded by the staff from a third-party software. The framework used to develop the component to be selected can be different from the framework used to develop the web page.

[0038] Components can be understood as objects that can be operated on the page, such as buttons, input boxes, chat windows, etc.

[0039] Here, the first metadata description may be the original metadata description of the candidate component, or may be a processed metadata description.

[0040] It should be noted that components developed using mainstream front-end frameworks (React, Vue, Angular, etc.) all have their own internal structures, and it is easy to write scripts (i.e., the extraction device of the present invention) to extract their component names and input properties to obtain metadata descriptions of the components.

[0041] Exemplarily, the format of metadata description can be {componentName: "cmpA", inputProps:[keyA, keyB, keyC, KeyD]}, where componentName means the component name, and the component name is cmpA (for example, weather), inputProps means a property set, and the properties of each component include: keyA (for example, address), keyB (for example, date), keyC (for example, temperature), KeyD (for example, visibility), etc.

[0042] Step 102: parse and process the first metadata description corresponding to each of the candidate components to obtain a tree object structure of the candidate components that matches the development page; the development page is a page for the user to select the candidate components and / or drag the candidate components; the tree object structure is used to represent the hierarchical relationship between the candidate components; the tree object structure includes the second metadata description of each of the candidate components.

[0043] Here, the framework used to develop the page can be a mainstream front-end framework, such as React, Vue, Angular, etc. Among them, the market share of frameworks such as React, Vue, Angula, etc. is more than 95%.

[0044] The tree object structure can be understood as the component relationship in the development page is a tree structure, which includes parent components, child components, sibling components, etc. Among them, the hierarchical relationship between components includes: parent components, child components, sibling components, etc., among which, the parent component contains child components, and the sibling components are parallel components.

[0045] For example, the tree object structure of the page metadata may be as follows:

[0046] { componentName: “page”, id: “page1”, props: {},

[0047] children: [ {componentName: “header”, id: “header1”, props: {}},

[0048] {componentName: “body”, id: “body1”, props: {}},

[0049] {componentName: “footer”, id: “footer1”, props: {}}, ]

[0051] }

[0052] Among them, page is the name of the parent component, page1 is the number (id) of the parent component, props is the attribute, "header", "body" and "footer" are the names of the child components (children), and "header1", "body1" and "footer1" are the ids of "header", "body" and "footer" respectively.

[0053] Step 103: Based on the second metadata description, determine the boundaries of each of the selected components and the interaction anchor points of each of the selected components; the boundaries are used for the user to select the selected components and drag the selected components; the interaction anchor points are used for the user to edit the selected components in the development page, and the editing operations include at least one of the following: deletion, addition, merging, and scaling.

[0054] Here, the second metadata description is obtained by parsing the first metadata description.

[0055] The boundary of the selected component includes but is not limited to a rectangular frame, a circular frame, an elliptical frame, etc. The boundary of the selected component can be a frame larger than the selected component or a frame that completely overlaps with the selected component, which is not limited in the present invention.

[0056] It should be noted that determining the boundaries and interaction anchors of the selected components is performed in the browser. Based on the second metadata and the original components (i.e., the components originally extracted by the extraction device), the loaded parsed module can generate the boundaries and anchors of the components in the visualization operation.

[0057] Here, in addition to being used for user dragging, the boundary of the component can also determine the range of the user dragging the component and the range of receiving other components.

[0058] In the embodiment of the present invention, the boundary description of the component can be extracted during the front-end component compilation process, or the boundary of the selected component can be obtained by calculation. However, the former is more expensive to implement and relies on static description, which is not as effective as the latter.

[0059] The interaction anchor point can be understood as a symbol on the boundary of the selected component, for example, a zoom symbol on the boundary of the selected component. Generally, the zoom symbol can be a point, and the user can scale the display interface size of the component by dragging the zoom symbol; for example, click the delete symbol or close symbol in the upper right corner of the component.

[0060] Merging can be understood as one component being dragged into another component.

[0061] Step 104: In response to the user's selection operation instruction for the to-be-selected component, draw the boundary and interaction anchor point of the to-be-selected component selected by the user on the development page.

[0062] The user selects a component to be selected using a mouse or finger, and the boundary and interaction anchor point of the component to be selected are drawn on the page for the user to edit the page.

[0063] In an embodiment of the present invention, by determining the first metadata description corresponding to each candidate component; parsing the first data description corresponding to each candidate component, a tree object structure of the candidate components that matches the development page is obtained; based on the second metadata description of the candidate components in the tree object structure, the boundaries of each candidate component and the interaction anchor points of each candidate component are determined; after the user selects the candidate component, the boundaries and interaction anchor points of the candidate component selected by the user are drawn on the development page. In this way, by simply parsing the metadata description corresponding to the candidate component, the boundaries and interaction anchor points of the component that the user drags can be obtained for user operation, which simplifies the development process and improves development efficiency. In addition, the component drag interaction capability realized by the metadata description means that the components displayed on the canvas during design do not need to rely on the components at runtime. The two are independent of each other, which improves the maintainability of the software system.

[0064] In an embodiment of the present invention, the parsing of the first metadata description corresponding to each candidate component to obtain a tree object structure of the candidate component matching the development page includes:

[0065] Parsing the first metadata description corresponding to each of the candidate components to obtain a second metadata description that matches each of the candidate components with the development page;

[0066] Here, the first metadata description may be parsed using a script written by a user, or may be parsed using a parsing device, which is not limited in the present invention.

[0067] It should be noted that the component to be selected may be developed using other frameworks or downloaded from third-party software. The component to be selected does not match the framework of the development web page, and the metadata description does not match either. Therefore, it is necessary to parse the first metadata description of the component to be selected to obtain the second metadata description so that the metadata description of the component to be selected matches the metadata description of the development page.

[0068] Numbering the second metadata description of each of the candidate components to obtain a numbered second metadata description;

[0069] The numbered second metadata description is stored in a tree structure in the running environment of the browser corresponding to the development page, so as to obtain a tree object structure of the candidate components matching the development page.

[0070] Here, the second metadata description of the candidate component can be numbered and indexed in the form of id and stored in the browser js running environment, while retaining the hierarchical relationship between components, and the parent component, child component, and sibling component relationships of the components.

[0071] The browser js runtime environment can monitor and process various user events, such as mouse clicks. When the user clicks on a selected component, the browser js runtime environment can trigger code execution to achieve rich interactive effects.

[0072] In an embodiment of the present invention, by parsing the first metadata description of the component to be selected, a second metadata description of the component to be selected that matches the development page is obtained, and the component metadata is stored in the browser js running environment in the form of an ID number index, thereby enabling user interaction with the development page, simplifying the development process, and improving development efficiency and quality.

[0073] In the embodiment of the present invention, determining the boundary of each of the candidate components and the interaction anchor point of each of the candidate components based on the second metadata description includes:

[0074] When the component to be selected is rendered in the browser, determining size information corresponding to the component to be selected and position information corresponding to the component to be selected;

[0075] Here, rendering refers to displaying the selected component on the development page. During the browser rendering process, the browser can extract the size information and position information corresponding to the selected component from the second metadata description of the selected component. The size information can be the length and width of the selected component, and the position information can be the coordinates of the selected component in the browser.

[0076] Determining a boundary of the component to be selected based on the size information, the position information, and a coordinate system of the browser;

[0077] After determining the size information and position information of the component to be selected, the boundary of the component to be selected is determined in the development page in combination with the coordinate system of the browser.

[0078] Based on the boundaries of the components to be selected, interaction anchor points of the components to be selected are determined.

[0079] After determining the boundary of the selected component, an interaction anchor point is determined on the boundary of the selected component. Here, the interaction anchor point can be set directly on the boundary of the selected component, or it can be set within a preset range from the boundary of the selected component. The present invention is not limited to this.

[0080] It should be noted that after the boundaries and interaction anchors of the selected components are determined, the boundaries and interaction anchors will not be displayed on the development page.

[0081] In this embodiment of the present invention, when rendering a component, the browser extracts the component's size and position information and uses this information to determine the boundaries and interaction anchor points of the selected component. This improves the accuracy of the boundaries and interaction anchor points of the selected component, enhancing the accuracy and user experience of operation. Furthermore, by processing metadata descriptions, drag-and-drop interaction functionality for components can be implemented, simplifying the development process, improving development efficiency, and reducing subsequent maintenance costs.

[0082] In an embodiment of the present invention, determining a first metadata description corresponding to at least one candidate component includes:

[0083] Extracting, from at least one candidate component, a third metadata description corresponding to each candidate component;

[0084] The component information that the corresponding to-be-selected component can accept dragging is added to each of the third metadata descriptions to obtain the first metadata description corresponding to each of the to-be-selected components.

[0085] It should be noted that the third metadata description refers to the initial metadata description corresponding to the selected component. After extracting the initial metadata description of each of the selected components, in order to better achieve the drag-and-drop interaction effect, it is necessary to add processing to the third metadata description. By adding other components to the third metadata, other components can be dragged into this component.

[0086] For example, if the initial metadata description of a component is {componentName: "cmpA", inputProps: [keyA, keyB, keyC, KeyD]}, to describe the drag-and-drop relationship between components, after extracting the initial metadata description, the drag-and-drop capability is set according to the needs of the business or development page. For example, the metadata description after setting is:

[0087] { componentName: “cmpA”, inputProps: [keyA, keyB, keyC, KeyD], dragConfig: {

[0088] accept: [cmpB,cmpC] / / Indicates that the cmpA component can accept cmpB and cmpC

[0089] }}

[0090] In an embodiment of the present invention, by adding information about components that can be dragged into the third metadata description of the selected component and setting a drag relationship between components, drag interaction between components is achieved, thereby improving the interaction performance between components.

[0091] In an embodiment of the present invention, the step of adding component information of the corresponding selected component that can accept a dragged component to each of the third metadata descriptions to obtain the first metadata description corresponding to each of the selected components includes:

[0092] Obtaining a requirements table for the development page;

[0093] The requirements table for developing a page is a document table that includes the requirements of users or customers.

[0094] Determining acceptable drag-in components corresponding to each of the candidate components based on the requirement table;

[0095] Here, the method for determining the acceptable drag-in components can be to determine a mapping relationship table between the candidate components and the acceptable drag-in components according to the requirements table, and determine the acceptable drag-in components corresponding to the candidate components according to the mapping relationship table; or, directly extract the acceptable drag-in components of the candidate components from the requirements table.

[0096] The component information of the acceptable drag-in components is added to the third metadata description to obtain the first metadata description corresponding to each of the to-be-selected components.

[0097] In another embodiment of the application, after the developer obtains the acceptable drag-in component corresponding to the candidate component according to the requirement table, the developer can manually add the component information of the acceptable drag-in component.

[0098] In an embodiment of the present invention, by automatically adding component information of acceptable dragged components to the metadata description of the candidate components according to the requirement table of the development page, drag-and-drop interaction between components is achieved, thereby improving the interaction performance between components.

[0099] In an embodiment of the present invention, drawing the boundary and interaction anchor point of the to-be-selected component selected by the user on the development page includes:

[0100] Determining that the browser recognizes the component to be selected selected by the user;

[0101] The component to be selected selected by the user and the first metadata description corresponding to the component to be selected selected by the user are combined, and a boundary and an interaction anchor point of the component to be selected selected by the user are drawn on the development page.

[0102] It should be noted that after the user selects a candidate component, the browser will identify the candidate component selected by the user, combine the candidate component selected by the user and the metadata description corresponding to the candidate component, and draw the boundary and interaction anchor point of the candidate component on the development page.

[0103] In the embodiment of the present invention, the boundary and interaction anchor point of the component to be selected are drawn in combination with the component to be selected and the metadata description corresponding to the component to be selected, thereby improving the accuracy of drawing the boundary and interaction anchor point of the component to be selected.

[0104] In an embodiment of the present invention, after drawing the boundary and interaction anchor point of the to-be-selected component selected by the user on the development page, the method further includes:

[0105] In response to the user's operation on the interaction anchor point, the to-be-selected component is edited, and the page component layout after the user editing is displayed in the development page.

[0106] Here, the page component layout includes at least one component and the position of the component on the page.

[0107] Specifically, after drawing the interactive anchor point on the development page, the user can perform corresponding operations on the selected component by clicking the symbol on the interactive anchor point. For example, click the delete symbol to delete the component, click the close symbol to close the component, and click the zoom symbol to scale the size of the component.

[0108] In another embodiment of the present invention, the user can also add components by selecting components in the component list window next to the development page and dragging them to the development page.

[0109] In the embodiment of the present invention, the user can edit the development page through the interactive anchor point to obtain the page component layout desired by the user, thereby improving the user experience.

[0110] The following are application scenarios of the component drawing method provided by the present invention.

[0111] In this application scenario, a customer relationship management software application (Customer Relationship Management, CRM) and a creat framework are taken as examples to illustrate the component drawing method provided by the present invention.

[0112] CRM application refers to the CRM software application delivered to customers in a browser / server architecture (BS) manner.

[0113] CRM front-end runtime: A web application delivered to customers that actually runs in the browser. It generates user-friendly applications by loading and parsing CRM metadata.

[0114] CRM front-end design time: The development environment in which users develop and modify CRM application metadata in a visual way is called "CRM front-end design time". The metadata of the development results will take effect in "CRM front-end runtime"

[0115] Low-code and no-code development: Empowering non-professional program developers to design and develop software applications under a certain system architecture in a visual way. The core program implementation of the visual display is to simulate the actual pages and components during software runtime in the designer program. Developers complete the development and changes of system functions by dragging, deleting, adding components, and designing component properties.

[0116] The metadata component description unit in the CRM system, implemented using PaaS technology, enables components developed with the React framework to be automatically selected and moved in the designer. The following example uses a form component and its subcomponents in SalesEasy CRM.

[0117] First, a software extraction device is used to extract the third metadata description corresponding to the candidate component from the written component; then, component information of the acceptable dragged-in component is added to the third data surface of the candidate component to obtain the first metadata description corresponding to the candidate component; the first metadata description of the candidate component is constructed into page metadata of a tree structure, wherein the page metadata only focuses on the unique ID number, name and modifiable properties of the component; the first metadata description is parsed and parsed into a tree object structure in the development page, and the component metadata description is stored in the browser js running environment in the form of an ID number index, and this module will retain the relationship between components: the parent component, child component, and sibling component relationship of the component; the boundary of the candidate component is calculated; with the help of direct graphics processing unit (GPU) accelerated rendering capabilities, the first metadata description of the candidate component and the component developed by React selected by the user are combined to draw the boundary and interaction anchor of any component unit on this development page.

[0118] Figure 2 This is a schematic diagram of the principle of extracting the first metadata description corresponding to the candidate component provided by the present invention, such as Figure 2As shown, a React component 201 is input into an extraction device 202, a component metadata description 203 is output, and the component metadata description 203 is persistently stored in a browser 204, wherein the extraction device is used to extract the metadata description corresponding to the React component.

[0119] Figure 3 This is a schematic diagram of the principle of drawing the boundaries and interaction anchor points of the selected components provided by the present invention, such as Figure 3 As shown, the page metadata structure 301 composed of the component metadata description 203 is input into the metadata parsing and loading device 302 to obtain component information 303 (component name and configurable extended attributes). The component information 303 is input into the canvas rendering device 304. When the user selects the component with the mouse, the component boundary and interaction anchor point (such as Figure 3 ), wherein the page presented by the canvas presenting means 304 is also a designer, which includes a web page link (https: / / crm.xiaoshouyi.com).

[0120] The component drawing method provided by the present invention directly renders the components that are normally developed based on React in the industry and are only used for runtime rendering, directly in the canvas of the SalesEasy CRM designer, and directly provides the capabilities of selection, sliding, and dragging, thereby reducing development costs. In addition, due to the non-invasive decoupling design of runtime components, the maintainability of such software systems is directly improved.

[0121] The component drawing method provided by the present invention has the following advantages: any front-end component normally developed based on react can be directly rendered in the CRM designer of SalesEasy without developing the selected interactive function in the design state, thereby reducing development costs; because the design state directly uses the original component for presentation, it does not care about the implementation and details of the component at all, so in all subsequent iterations of all react components, it will not affect the interaction effects of these components in the designer, thereby improving development quality and system maintainability; the metadata description analysis design can be used to detect the current mainstream front-end frameworks, and supports most mainstream front-end frameworks.

[0122] The following describes a drawing device for components provided by the present invention. The drawing device for components described below and the drawing method for components described above can refer to each other.

[0123] Figure 4 This is a schematic diagram of the structure of the drawing device for components provided by the present invention, such as Figure 4 As shown, the drawing device 400 for the component includes:

[0124] A first determining module 401 is configured to determine a first metadata description corresponding to at least one candidate component;

[0125] Parsing module 402 is configured to parse the first metadata description corresponding to each candidate component to obtain a tree object structure of the candidate components that matches the development page, wherein the development page is a page where a user selects and / or drags the candidate components; the tree object structure is used to represent the hierarchical relationship between the candidate components; and the tree object structure includes the second metadata description of each candidate component.

[0126] A second determination module 403 is configured to determine, based on the second metadata description, a boundary of each of the candidate components and an interaction anchor point of each of the candidate components; the boundary is used by a user to select and drag the candidate component; the interaction anchor point is used by the user to perform an editing operation on the candidate component in the development page, the editing operation including at least one of the following: deletion, addition, merging, and scaling;

[0127] The display module 404 is configured to draw the boundary and interaction anchor point of the to-be-selected component selected by the user on the development page in response to the user's selection operation instruction for the to-be-selected component.

[0128] In an example embodiment, the parsing module 402 is specifically used to: parse the first metadata description corresponding to each of the candidate components to obtain a second metadata description that matches the development page for each of the candidate components; number the second metadata description of each of the candidate components to obtain a numbered second metadata description; store the numbered second metadata description in a tree structure in the running environment of the browser corresponding to the development page to obtain a tree object structure of the candidate components that match the development page.

[0129] In an exemplary embodiment, the second determination module 403 is specifically used to: determine the size information corresponding to the to-be-selected component and the position information corresponding to the to-be-selected component when the to-be-selected component is rendered in the browser; determine the boundary of the to-be-selected component based on the size information, the position information and the coordinate system of the browser; and determine the interaction anchor point of each of the to-be-selected components based on the boundary of the to-be-selected component.

[0130] In an exemplary embodiment, the first determination module 401 is specifically used to: extract the third metadata description corresponding to each candidate component from at least one candidate component; add the corresponding component information that the candidate component can accept to be dragged into each third metadata description to obtain the first metadata description corresponding to each candidate component.

[0131] In an exemplary embodiment, the first determination module 401 is further specifically used to: obtain a requirement table of the development page; determine an acceptable drag-in component corresponding to each of the candidate components based on the requirement table; and add component information of the acceptable drag-in component to the third metadata description to obtain a first metadata description corresponding to each of the candidate components.

[0132] In an exemplary embodiment, the display module 404 is specifically used to determine that the browser recognizes the candidate component selected by the user; combine the candidate component selected by the user and the first metadata description corresponding to the candidate component selected by the user, and draw the boundary and interaction anchor point of the candidate component selected by the user on the development page.

[0133] In an exemplary embodiment, the component drawing device 400 further includes an editing module, specifically configured to edit the selected component in response to the user's operation on the interaction anchor point, and display the page component layout after the user's editing in the development page.

[0134] Figure 5 This is a schematic diagram of the physical structure of the electronic device provided by the present invention, such as Figure 5 As shown, the electronic device may include: a processor (processor) 510, a communication interface (Communications Interface) 520, a memory (memory) 530 and a communication bus 540, wherein the processor 510, the communication interface 520, and the memory 530 communicate with each other through the communication bus 540. The processor 510 can call the logic instructions in the memory 530 to execute a drawing method for components, which includes: determining a first metadata description corresponding to at least one candidate component; parsing the first metadata description corresponding to each candidate component to obtain a tree object structure of the candidate component that matches the development page; the development page is a page for the user to select the candidate component and / or drag the candidate component; the tree object structure is used to characterize the hierarchical relationship between the candidate components; the tree object structure includes a second metadata description of each candidate component; based on the second metadata description, determining the boundary of each candidate component and the interaction anchor point of each candidate component; the boundary is used for the user to select the candidate component and drag the candidate component; the interaction anchor point is used for the user to perform editing operations on the candidate component in the development page, and the editing operation includes at least one of the following: deletion, addition, merging, and scaling; in response to the user's selection operation instruction for the candidate component, drawing the boundary and interaction anchor point of the candidate component selected by the user on the development page.

[0135] Furthermore, the logic instructions in the aforementioned memory 530 can be implemented as software functional units and, when sold or used as independent products, can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the portion 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 for causing a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as a USB flash drive, a mobile hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0136] On the other hand, the present invention also provides a computer program product, which includes a computer program, which can be stored on a non-transitory computer-readable storage medium. When the computer program is executed by a processor, the computer can execute the component drawing method provided by the above methods, which includes: determining a first metadata description corresponding to at least one to-be-selected component; parsing the first metadata description corresponding to each of the to-be-selected components to obtain a tree object structure of the to-be-selected components that matches a development page; the development page is a page for a user to select the to-be-selected component and / or drag the to-be-selected component; the tree object structure is used to characterize the hierarchical relationship between the components to be selected; the tree object structure includes a second metadata description of each component to be selected; based on the second metadata description, the boundary of each component to be selected and the interaction anchor point of each component to be selected are determined; the boundary is used for the user to select the component to be selected and drag the component to be selected; the interaction anchor point is used for the user to perform editing operations on the component to be selected in the development page, and the editing operations include at least one of the following: deletion, addition, merging, and scaling; in response to the user's selection operation instruction for the component to be selected, the boundary and interaction anchor point of the component to be selected selected by the user are drawn on the development page.

[0137] On the other hand, the present invention also provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, is implemented to execute the component drawing method provided by the above-mentioned methods, the method comprising: determining a first metadata description corresponding to at least one candidate component; parsing the first metadata description corresponding to each candidate component to obtain a tree object structure of the candidate components matching the development page; the development page is a page for the user to select the candidate component and / or drag the candidate component; the tree object structure is used to characterize the hierarchical relationship between the candidate components; the tree object structure includes a second metadata description of each candidate component; based on the second metadata description, determining the boundary of each candidate component and the interaction anchor point of each candidate component; the boundary is used for the user to select the candidate component and drag the candidate component; the interaction anchor point is used for the user to perform editing operations on the candidate component in the development page, and the editing operation includes at least one of the following: deletion, addition, merging, and scaling; in response to the user's selection operation instruction for the candidate component, drawing the boundary and interaction anchor point of the candidate component selected by the user on the development page.

[0138] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, i.e., they may be located in one location or distributed across multiple network units. Some or all of the modules may be selected based on actual needs to achieve the objectives of the present embodiment. Persons of ordinary skill in the art will be able to understand and implement the present invention without inventive effort.

[0139] Through the above description of the embodiments, those skilled in the art will clearly understand that each embodiment can be implemented using software plus a necessary general-purpose hardware platform, or of course, hardware. Based on this understanding, the essence of the above technical solution, or the portion that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a magnetic disk, or an optical disk, and includes a number of instructions for causing a computer device (such as a personal computer, server, or network device) to execute the methods described in each embodiment or certain portions of the embodiments.

[0140] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present invention.

Claims

1. A drawing method for a component, characterized in that: include: Extracting a third metadata description corresponding to each of the candidate components from at least one candidate component; Get the requirements table for the development page; The third metadata description is used to describe the name of the candidate component and the attributes of the candidate component; Based on the requirement table, determining acceptable drag-in components corresponding to each of the to-be-selected components; Adding the component information of the acceptable drag-in component to the third metadata description to obtain the first metadata description corresponding to each of the to-be-selected components; The first metadata description is a metadata description that adds the component information of the acceptable drag-in component to the third metadata description; The first metadata description corresponding to each of the candidate components is parsed to obtain a tree object structure of the candidate components matching the development page; the development page is a page for the user to select the candidate components and / or drag the candidate components; the tree object structure is used to represent the hierarchical relationship between the candidate components; the tree object structure includes the second metadata description of each of the candidate components; The second metadata description is a description matching the development page obtained after parsing the first metadata description; Based on the second metadata description, determining the boundary of each of the components to be selected and the interaction anchor point of each of the components to be selected; The boundary is used by the user to select the component to be selected and drag the component to be selected; the interaction anchor is used by the user to perform an editing operation on the component to be selected in the development page, and the editing operation includes at least one of the following: delete, add, merge, and scale; In response to a user's selection operation instruction for the component to be selected, a boundary and an interaction anchor point of the component to be selected selected by the user are drawn on the development page.

2. The component drawing method according to claim 1, characterized in that: The parsing process of the first metadata description corresponding to each of the candidate components to obtain a tree object structure of the candidate components matching the development page includes: Parsing the first metadata description corresponding to each of the candidate components to obtain a second metadata description matching each of the candidate components with the development page; Numbering the second metadata descriptions of the components to be selected to obtain numbered second metadata descriptions; The numbered second metadata description is stored in a tree structure in the running environment of the browser corresponding to the development page, so as to obtain a tree object structure of the candidate components matching the development page.

3. The component drawing method according to claim 2, characterized in that: The determining, based on the second metadata description, boundaries of each of the components to be selected and interaction anchor points of each of the components to be selected includes: When the component to be selected is rendered in the browser, determining size information corresponding to the component to be selected and position information corresponding to the component to be selected; Determine the boundary of the to-be-selected component based on the size information, the position information and the coordinate system of the browser; Based on the boundaries of the components to be selected, interaction anchor points of each of the components to be selected are determined.

4. The component drawing method according to claim 2, characterized in that: Drawing the boundary and interaction anchor point of the selected component selected by the user on the development page includes: Determining that the browser recognizes the component to be selected selected by the user; The component to be selected selected by the user and the first metadata description corresponding to the component to be selected selected by the user are combined, and the boundary and interaction anchor point of the component to be selected selected by the user are drawn on the development page.

5. The component drawing method according to any one of claims 1 to 3, characterized in that: After drawing the boundary and interaction anchor point of the to-be-selected component selected by the user on the development page, the method further includes: In response to the user's operation on the interaction anchor point, the to-be-selected component is edited, and the page component layout after the user's editing is displayed in the development page.

6. A drawing device for a component, characterized in that: include: A first determining module is used to extract a third metadata description corresponding to each of the at least one candidate component from the candidate component; Obtaining a requirement table of a development page; the third metadata description is used to describe the name of the candidate component and the attributes of the candidate component; Based on the requirement table, determining acceptable drag-in components corresponding to each of the to-be-selected components; Adding the component information of the acceptable drag-in component to the third metadata description to obtain the first metadata description corresponding to each of the to-be-selected components; The first metadata description is a metadata description that adds the component information of the acceptable drag-in component to the third metadata description; A parsing module is used to parse the first metadata description corresponding to each of the candidate components to obtain a tree object structure of the candidate components that matches the development page. The development page is a page where the user selects the candidate components and / or drags the candidate components; the tree object structure is used to represent the hierarchical relationship between the candidate components; the tree object structure includes the second metadata description of each of the candidate components; The second metadata description is a description matching the development page obtained after parsing the first metadata description; A second determination module, configured to determine a boundary of each of the candidate components and an interaction anchor point of each of the candidate components based on the second metadata description; The boundary is used by the user to select the component to be selected and drag the component to be selected; the interaction anchor is used by the user to perform an editing operation on the component to be selected in the development page, and the editing operation includes at least one of the following: delete, add, merge, and scale; The display module is used to draw the boundary and interaction anchor point of the to-be-selected component selected by the user on the development page in response to the user's selection operation instruction for the to-be-selected component.

7. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the component drawing method according to any one of claims 1 to 5 is implemented.

8. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the component drawing method according to any one of claims 1 to 5 is implemented.

Images