Configuration method and system for mxGraph dynamic components

Abstract

The present invention belongs to the technical field of dynamic component configuration, and specifically relates to a configuration method and system for mxGraph dynamic components. The method includes: 1. The user checks whether there is a "flowchart" type chart in the current component library, and enters the "flowchart" component list; 2. If a component needs to be added to the "flowchart" type chart, click the "add component" button; 3. If there is no component that meets the user's needs in the component library selection box, the user creates a component and customizes the configuration properties and style of the component; 4. Click the confirmation button in the component library selection box, the "flowchart" component list displays the selected component, and publishes the "flowchart" component library; 5. The user clicks the new drawing button, selects the "flowchart" canvas, enters the "flowchart", and obtains the data of the "flowchart" component library through the back-end interface; by looping and parsing the data of the back-end interface, the "flowchart" component library is finally generated.

Description

Technical Field

[0001] The present invention belongs to the technical field of dynamic component configuration, and in particular relates to a configuration method and system for mxGraph dynamic components. Background Art

[0002] With the rapid development of Internet technology, especially the continuous progress in the field of browser technology, users' demand for online drawing tools is growing. As a powerful and open source online drawing engine, mxGraph is widely welcomed for its rich functions and flexibility. mxGraph supports a variety of graphics drawing, layout management, event handling and other functions, and is suitable for various complex drawing needs, such as flowcharts, organizational charts, network topology diagrams, etc. However, in actual business applications, the needs of different companies are often different. Specifically, these needs include but are not limited to: 1. Different component styles: For drawing components, companies may require specific styles to meet visual requirements.

[0003] 2. Custom creation of components: Users want to be able to create new drawing components according to their needs, rather than just using predefined components.

[0004] 3. Support different components for different types of diagrams: Different types of diagrams (such as flowcharts, architecture diagrams, mind maps, topology diagrams, etc.) may require different sets of components.

[0005] 4. Style processing of existing components: Batch processing of components already in the canvas, including but not limited to style, name, attributes, etc.

[0006] Traditional solutions usually meet these requirements through secondary development. This approach has the following problems: 1. Large workload: Every time a component is added or modified, a large amount of code needs to be written, which increases the workload of developers.

[0007] 2. High technical threshold: Developers need to have a certain foundation in mxGraph development, which is a challenge for non-professional developers.

[0008] 3. High maintenance cost: Once the requirements change, re-development is required, which is not only time-consuming but also increases maintenance costs.

[0009] 4. Poor user experience: Ordinary users cannot directly participate in the management and configuration of components and can only rely on developers, resulting in slow response and poor user experience.

[0010] Therefore, there is an urgent need to design a solution that can simplify component management, reduce development difficulty, and facilitate use by ordinary users, thereby reducing the need for secondary development of mxGraph and improving work efficiency and user experience. Summary of the invention

[0011] The present invention aims to overcome the problems of heavy workload, high technical threshold, high maintenance cost and poor user experience in the secondary development of mxGraph in the prior art, and provides a configuration method and system for mxGraph dynamic components that can simplify component management, reduce development difficulty, facilitate use by ordinary users, and improve work efficiency and user experience.

[0012] In order to achieve the above-mentioned object of the invention, the present invention adopts the following technical solutions: The configuration method for mxGraph dynamic components includes the following steps: S1, the user checks whether there is a "flowchart" type chart in the current component library, and enters the "flowchart" component list; S2. If you need to add components to a "flowchart" type chart, click the "Add Component" button and a component library selection box will pop up; S3, if there is no component that meets the user's needs in the component library selection box, the user creates a component and customizes the configuration properties and style of the component; S4, click the confirmation button in the component library selection box, the "Flowchart" component list displays the selected components, and the "Flowchart" component library is published; S5, the user clicks the new drawing button, selects the "flowchart" canvas, enters the "flowchart", and obtains the data of the "flowchart" component library through the back-end interface; by looping and parsing the data of the back-end interface, the required "flowchart" component library is finally generated.

[0013] Preferably, step S1 comprises the following steps: S11. If there is no chart of the "flowchart" type, create a new "flowchart" type and then enter the "flowchart" component list; if there is a chart of the "flowchart" type, click the "flowchart" type button to enter the "flowchart" component list.

[0014] Preferably, in step S2, the component library selection box is grouped according to component type and displays all created components.

[0015] Preferably, in step S3, the process of configuring properties and styles of the custom component includes the following steps: S31, customizing the configuration properties and styles of the component, including component name, component identifier, chart type, shape selection, uploaded image, image location, image size, component size, default background color, and font color settings; wherein the component identifier is used to ensure component uniqueness; the shape selection refers to the shape of the component corresponding to the identifier image, including rectangle, circle, triangle, and diamond; S32, inserting an mxGraph canvas, and generating components and corresponding logo images through the add component method of the mxGraph engine, and modifying the component style using the update component style method; S33, click the confirmation button to finally generate the component's XML file; the XML file is encrypted using the canvas engine's own encryption method to obtain the metadata of the corresponding component and pass it to the backend; S34, the backend uses the mxGraph server-side XML conversion image toolbox to generate a png image, which is then sent back to the component library selection box for rendering and selection to complete the creation of the custom component.

[0016] Preferably, during step S4, if a component of other diagram types is selected in the "flowchart" component library, only reference processing is performed on the selected component; the other diagram types include architecture diagrams and topology diagrams.

[0017] Preferably, step S4 comprises the following steps: S41, if you are not satisfied with the configuration properties and style of the selected component displayed in the "Flowchart" component list, personalize the component style in the list again; the scope of the personalization modification only includes the component name, background color, font color, image position, component size and image size.

[0018] The present invention also provides a configuration system for mxGraph dynamic components including: The chart type module is used to maintain different types of charts and to select and combine drawing components; The component management module is used to allow users to create components and customize the configuration properties and styles of components; The interactive interface module is used to enable users to use components in the canvas interface.

[0019] Compared with the prior art, the present invention has the following advantages: (1) The solution of the present invention greatly reduces the secondary development and time cost of canvas components for developers; ordinary users can also participate in component management and configure components efficiently; (2) The solution of the present invention is not only effective for incremental components, but also helps batch processing of existing components (components saved in the canvas), and also provides an entry for subsequent component extension properties and functions (such as component form configuration, component status configuration, etc.); (3) The solution of the present invention not only facilitates ordinary users, but also reduces the workload of developers. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 A flow chart of a configuration method for mxGraph dynamic components in the present invention; Figure 2 A schematic diagram of an interface for displaying a component list created by a user in the present invention; Figure 3 A schematic diagram of an interface for selecting components by a user in the present invention; Figure 4 A schematic diagram of an interface for creating a component for a user in the present invention; Figure 5 This is a schematic diagram of an interface showing mxGraph rendering dynamic components in the present invention. DETAILED DESCRIPTION

[0021] In order to more clearly illustrate the embodiments of the present invention, the specific implementation methods of the present invention will be described below with reference to the accompanying drawings. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those of ordinary skill in the art, other accompanying drawings and other implementation methods can be obtained based on these accompanying drawings without creative work.

[0022] like Figure 1 As shown, the present invention provides a configuration method for mxGraph dynamic components, comprising the following steps: 1. First, the user enters the chart type module. If there is no "flowchart" type chart in the current component library, you can create a new "flowchart" type. If there is already a "flowchart" type chart, click the "flowchart" type on the left to enter the "flowchart" component list. The specific interface is as follows Figure 2 As shown; 2. If you need to create a component for the "Flowchart" chart, click the "Add Component" button and a component library selection box will pop up. The specific interface is as follows: Figure 3 As shown; the component library selection box will be grouped according to component type, showing all created components, making it convenient for users to quickly select components.

[0023] 3. If there is no component that meets the user's needs in the component library selection box, the user creates a component and customizes the configuration properties and style of the component, which specifically includes the following process: Users can click the link to create a component in the lower left corner to go to the component management module to add a component. The properties of a custom component include component name, component ID, chart type, shape selection (such as rectangle, circle, triangle, diamond, etc.), image upload, image position, image size, component size, default background color and font color settings, etc. The component ID is to ensure the uniqueness of the component. If the adding interface is empty, it will be randomly generated by the system, and users can also fill it in. Image upload allows users to select image files to upload.

[0024] In order to display the components more intuitively and achieve WYSIWYG, a small mxGraph canvas is inserted here. Generate components and pictures through the mxGraph engine's add component method, and modify the component style using the update component style method. Users can adjust the size of components and pictures in the canvas, or adjust them through the input box below. Click OK to finally generate the component's xml (including the component style), and then encrypt the xml using the canvas engine's own encryption method to obtain the component's metadata and pass it to the backend. The backend uses the mxGraph server-side api tool to generate a png image, which is returned to the component library selection box for rendering and selection, and the entire custom component is created. Figure 4 As shown, it is the visual interface for creating a "custom activity" component. Figure 4 The following shows several configuration properties and style parameters of the Custom Activity component.

[0025] 4. Click Confirm in the component library selection box, and the "Flowchart" component list will display the selected components. If components from other chart types (architecture diagrams and topology diagrams) are selected in the "Flowchart" component library, the components will only be referenced, and the component metadata in the component library will not be updated. You can still personalize the component styles in the list again. The modifications here are different from adding. You cannot modify the shape, upload pictures and component logos, and you can only modify the component name, background color, font color, picture position, component size, and picture size. This ensures the uniqueness of the component while satisfying differentiation. Finally, publish the "Flowchart" component library; 5. The user clicks the New Drawing button, selects the "Flowchart" canvas, enters the "Flowchart", and obtains the data of the "Flowchart" component library through the back-end interface; by looping and parsing the data of the back-end interface, the required "Flowchart" component library is finally generated, such as Figure 5 shown.

[0026] exist Figures 3 to 5In the Custom Activity component icon, SCM (Supply Chain Management) represents supply chain management.

[0027] In addition, the present invention also provides a configuration system for mxGraph dynamic components including: Chart type module, component management module and interactive interface module.

[0028] Among them, the chart type module is mainly used to maintain different types of charts (such as flow charts, architecture diagrams, topology diagrams, etc.), and can flexibly select and combine drawing components. The component management module is a module for adding, deleting, modifying and checking components, forming a system's default drawing component library, which is mainly used for the chart type module to select components for use.

[0029] Through this system, users can: Set component default styles: adjust colors, fonts, and other visual elements through an intuitive interface.

[0030] Create new drawing components: Easily design and add new graphic elements to meet specific needs.

[0031] Select drawing components as needed: flexibly select and combine drawing components according to different types of chart requirements.

[0032] In order to more clearly describe the component generation process, the following takes the "custom activity" component as an example to describe in detail the specific implementation steps of the present invention in practical applications: 1. Get the component configuration data by calling the backend interface. This data includes the component metadata (such as name, logo, encrypted XML, etc.) and the user-defined style (customStyle) in the "flowchart" component type.

[0033] 2. Get the encrypted XML in the metadata according to the component configuration data, and then decrypt and generate the component through the built-in rendering component method in the canvas. If there is a style configured in customStyle, it will be rendered with this style first. If not, the metadata will be used to render the style.

[0034] 3. Add the "Custom Activity" component to the canvas. Drag the "Custom Activity" component from the component library to the canvas, get the identifier flow.activity set in the component's metadata, and use this identifier as the component's identifier attribute, which is unique. Of course, users can also use the toolbar at the top of the canvas to further adjust the component's appearance and style attributes, such as changing the font color, size, background color, etc.

[0035] 4. Process the existing "custom activity" component. If there is already a "custom activity" component instance in the canvas, and it is different from the currently configured default component style, the system will use the canvas toolbox to obtain all component instances in the canvas, and then traverse all component instances to filter out the "custom activity" component collection whose component identification attribute is equal to flow.activity, and then traverse the component collection to check whether the component has been manually modified by the user. If not, the default style is updated.

[0036] The innovation of this invention is that drawing components can be easily managed and standardized, and components can be easily added, deleted and modified without the intervention of developers. For ordinary users, the visualization page configuration is more friendly; for developers, related needs can be implemented without secondary development.

[0037] The above description is only a detailed description of the preferred embodiments and principles of the present invention. For ordinary technicians in this field, according to the ideas provided by the present invention, there will be changes in the specific implementation methods, and these changes should also be regarded as the protection scope of the present invention.

Claims

1. A configuration method for mxGraph dynamic components, characterized in that: The method comprises the following steps: S1, the user checks whether there is a "flowchart" type chart in the current component library, and enters the "flowchart" component list; S2. If you need to add components to a "flowchart" type chart, click the "Add Component" button and a component library selection box will pop up; S3, if there is no component that meets the user's needs in the component library selection box, the user creates a component and customizes the configuration properties and style of the component; S4. Click the confirmation button in the component library selection box. The "Flowchart" component list displays the selected components and publishes the "Flowchart" component library. S5, the user clicks the new drawing button, selects the "flowchart" canvas, enters the "flowchart", and obtains the data of the "flowchart" component library through the back-end interface; by looping and parsing the data of the back-end interface, the required "flowchart" component library is finally generated.

2. The configuration method for mxGraph dynamic components according to claim 1, characterized in that: Step S1 includes the following steps: S11. If there is no "flowchart" type chart, create a new "flowchart" type, and then enter the "flowchart" component list; if there is a "flowchart" type chart, click the "flowchart" type button to enter the "flowchart" component list.

3. The configuration method for mxGraph dynamic components according to claim 1, characterized in that: In step S2, the component library selection box is grouped according to component type and displays all created components.

4. The configuration method for mxGraph dynamic components according to claim 1, characterized in that: In step S3, the process of configuring properties and styles of the custom component includes the following steps: S31, customizing the configuration properties and styles of the component, including component name, component identifier, chart type, shape selection, uploaded image, image location, image size, component size, default background color, and font color settings; wherein the component identifier is used to ensure component uniqueness; the shape selection refers to the shape of the component corresponding to the identifier image, including rectangle, circle, triangle, and diamond; S32, inserting an mxGraph canvas, and generating components and corresponding logo images through the add component method of the mxGraph engine, and modifying the component style using the update component style method; S33, click the confirmation button to finally generate the component's XML file; the XML file is encrypted using the canvas engine's own encryption method to obtain the metadata of the corresponding component and pass it to the backend; S34, the backend uses the XML conversion image toolbox on the mxGraph server to generate a png image, which is then sent back to the component library selection box for rendering and selection, completing the creation of the custom component.

5. The configuration method for mxGraph dynamic components according to claim 4, characterized in that: In step S4, if a component of other diagram types is selected in the "flowchart" component library, only reference processing is performed on the selected component; the other diagram types include architecture diagrams and topology diagrams.

6. The configuration method for mxGraph dynamic components according to claim 5, characterized in that: Step S4 includes the following steps: S41, if you are not satisfied with the configuration properties and style of the selected component displayed in the "Flowchart" component list, personalize the component style in the list again; the scope of the personalization modification only includes the component name, background color, font color, image position, component size and image size.

7. A configuration system for mxGraph dynamic components, used to implement the configuration method for mxGraph dynamic components according to any one of claims 1 to 6, characterized in that: The configuration system for mxGraph dynamic components includes: The chart type module is used to maintain different types of charts and to select and combine drawing components; The component management module is used to allow users to create components and customize the configuration properties and styles of components; The interactive interface module is used to enable users to use components in the canvas interface.

Images