CN113961751A

CN113961751A - Visio graphic file online editing method, device, equipment and storage medium

Info

Publication number: CN113961751A
Application number: CN202010700275.1A
Authority: CN
Inventors: 蔡兴涛
Original assignee: China Mobile Communications Group Co Ltd; China Mobile Group Anhui Co Ltd
Current assignee: China Mobile Communications Group Co Ltd; China Mobile Group Anhui Co Ltd
Priority date: 2020-07-20
Filing date: 2020-07-20
Publication date: 2022-01-21

Abstract

The embodiment of the invention relates to the technical field of online drawing, and discloses a method for editing a visio graphic file online, which comprises the following steps: acquiring a visio graphic file, wherein the visio graphic file is uploaded to a web system from the local; analyzing the visio graphic file into configurable JSON data; configuring the configurable JSON data to obtain configured JSON data; performing graphic rendering in the web system according to the configured JSON data to obtain an editable online graphic file; and displaying the editable online graphic file. Through the mode, the embodiment of the invention has the beneficial effect of realizing online editing of the uploaded visio graphic file in the web system.

Description

Visio graphic file online editing method, device, equipment and storage medium

Technical Field

The embodiment of the invention relates to the technical field of online drawing, in particular to a method, a device and equipment for online editing of a visio graphic file and a computer readable storage medium.

Background

At present, for a visio graph uploaded to a web system, a user needs to download a corresponding visio attachment to a local place when modifying the visio graph in the system, then opens a file through local visio software to modify the visio graph, and uploads the modified visio graph to the web system after the modification is completed.

Disclosure of Invention

In view of the above problems, an embodiment of the present invention provides a method for online editing of a visio graph, which is used to solve the technical problem that uploaded visio graph files cannot be online edited in a web system in the prior art.

According to an aspect of an embodiment of the present invention, there is provided a method for online editing of a visio graph, the method including:

acquiring a visio graphic file, wherein the visio graphic file is uploaded to a web system from the local;

analyzing the visio graphic file into configurable JSON data;

configuring the configurable JSON data to obtain configured JSON data;

performing graphic rendering in the web system according to the configured JSON data to obtain an editable online graphic file;

and displaying the editable online graphic file.

In an optional manner, parsing the visio file into JSON data includes:

acquiring xml data of the visio file;

analyzing the xml data into configurable JSON data;

the JSON data comprises process node information and connection information.

In an optional manner, the configuring the JSON data to obtain configured JSON data further includes:

configuring html tags and svg tags for the JSON data to obtain configured JSON data;

the process node information corresponds to the html tag, and the connection information corresponds to the svg tag.

In an optional manner, before performing graphics rendering in the web system according to the configured JSON data to obtain an editable online graphics file, the method further includes:

creating a flow node canvas assembly based on html, wherein the flow node canvas assembly comprises a flow node canvas assembly type and a flow node canvas assembly attribute;

creating a wiring canvas component based on the svg, the wiring canvas component comprising a wiring canvas component type and a wiring canvas component attribute;

creating a toolbar component based on the document object model, wherein the toolbar component binds drag events.

In an optional manner, after presenting the editable online graphic file, the method further includes:

receiving a triggered event;

and editing the online graphic file according to the triggered event to obtain an edited graphic file.

According to another aspect of the embodiments of the present invention, there is provided a visio graphic file online editing apparatus, including:

the file acquisition module is used for acquiring a visio graphic file, and the visio graphic file is uploaded to a web system from the local;

the parsing module is used for parsing the visio graphic file into configurable JSON data;

the configuration module is used for configuring the configurable JSON data to obtain the configured JSON data;

the rendering module is used for performing graphic rendering in the web system according to the configured JSON data to obtain an editable online graphic file;

and the display module is used for displaying the editable online graphic file.

In an optional manner, parsing the visio file into JSON data by a parsing module includes:

acquiring xml data of the visio file;

analyzing the xml data into configurable JSON data;

the JSON data comprises process node information and connection information.

In an optional manner, the configuring module configures the JSON data to obtain configured JSON data, and further includes:

the system 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 used for storing at least one executable instruction, and the executable instruction enables the processor to execute the operation of the online editing method of the visio graphic file

According to another aspect of the embodiments of the present invention, there is provided a computer-readable storage medium, having at least one executable instruction stored therein, which when running on a visio graphics file online editing apparatus/device, causes the visio graphics file online editing apparatus/device to operate the above-mentioned visio graphics file online editing method.

According to the embodiment of the invention, the uploaded visio file is analyzed and converted into the target format data, and the editable online graphic file is obtained by rendering in the system according to the target format data, so that the user can edit the uploaded visio graphic file online in the web system.

Furthermore, the embodiment of the invention can furthest exert the efficiency of the business information contained in the visio graphic file by related and marking the detailed business process information in the editable online graphic file.

The foregoing description is only an overview of the technical solutions of the embodiments of the present invention, and the embodiments of the present invention can be implemented according to the content of the description in order to make the technical means of the embodiments of the present invention more clearly understood, and the detailed description of the present invention is provided below in order to make the foregoing and other objects, features, and advantages of the embodiments of the present invention more clearly understandable.

Drawings

The drawings are only for purposes of illustrating embodiments and are not to be construed as limiting the invention. Also, like reference numerals are used to refer to like parts throughout the drawings. In the drawings:

FIG. 1 is a flowchart illustrating a method for online editing a visio graphic file according to an embodiment of the present invention;

FIG. 2 is a schematic structural diagram of an online editing apparatus for a visio graphic file according to an embodiment of the present invention;

fig. 3 shows a schematic structural diagram of a visio graphic file online editing device provided by an embodiment of the present invention.

Detailed Description

Exemplary embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the invention are shown in the drawings, it should be understood that the invention can be embodied in various forms and should not be limited to the embodiments set forth herein.

Fig. 1 shows a flowchart of an embodiment of a method for online editing of a visio graphic file, which is performed by a visio graphic file online editing apparatus. The visio graphic file online editing device may be a computer device. As shown in fig. 1, the method comprises the steps of:

step 110: and acquiring a visio graphic file, wherein the visio graphic file is uploaded to a web system from the local.

In the embodiment of the invention, the visio graph file can be a flow chart file and can also be other engineering graph files of visio. And acquiring xml data of the visio graphic file through a background interface of the web system. The background interface is a background java poi api interface.

Step 120: and analyzing the visio graphic file into configurable JSON data.

JSON is a data format applied to data exchange in internet transmission. The method comprises the steps of converting relevant information of a visio graphic file into data in a JSON data format, submitting the JSON data to a web system, and processing the JSON data by using a back-end language to convert the JSON data into graphic file information which can be edited in the web system.

In the embodiment of the invention, by acquiring the xml data of the visio graphic file, the data is analyzed into JSON data through java poi api. Here, xml data of the visio graphic file may be parsed by a document object model dom (document object model), thereby being parsed into configurable JSON data. The purpose is to acquire and configure the graphic file information of the visio graphic file. The graphic file information comprises information such as type nodes, text information, connection nodes and the like. The type nodes comprise process nodes such as a starting node, a judging node and a link node. Therefore, the graphic file information includes process node information and link information. The process node information includes information such as node content, center point coordinates, node types, and the like of the process node. The link information includes the flow node ID of each link endpoint, the key value of the link object itself, and the text information on the link. Since the xml data of the visio graphic file includes the attribute and the attribute information of the visio graphic file. Therefore, the configurable JSON data of the preset data structure can be correspondingly analyzed by identifying the attribute representation or value and other identifiers of each node and connecting line in the xml of the visio graph file. The configurable JSON data comprises information of each process node and connection information. The process node information includes process node attribute information, and the link information includes link attribute information. The form of the preset data structure is not particularly limited in the embodiment of the present invention. The node attribute information includes rendering information such as node content, center point coordinates, node types, and the like of each process node. The link attribute information includes rendering information such as a process node ID of each link endpoint and a key value (e.g., a key value, fromID, fromport, toID, toPart) of the link object itself.

Step 130: and configuring the configurable JSON data to obtain the configured JSON data.

In the embodiment of the invention, the rendering and editing of the graphic file are carried out in the web system through the canvas composed of html and svg. Therefore, configurable JSON data needs to be configured to get html and svg available data.

And after the configurable JSON data is obtained, reading the configurable JSON data, performing secondary analysis on the configurable JSON data, and respectively configuring html tags corresponding to the node attribute information and svg tags corresponding to the link attribute information for the graphic file information in the configurable JSON data, so as to obtain the configured JSON data comprising the html tags and the svg tags, and analyzing the JSON data into a browser. The JSON data including the html tag and the svg tag is stored in JSON. The html label corresponds to node information, and specifically corresponds to node attribute information; the svg tag corresponds to connection information, specifically connection attribute information. By reading the html tag and the svg tag, the information to be rendered currently is each process node or each link node, so that the process node attribute information of each process node or the link attribute information of each link node stored in the JSON is correspondingly read, and the positioning and style type of the node on the canvas are realized.

Step 140: and performing graphic rendering in the web system according to the configured JSON data to obtain an editable online graphic file.

Before performing graphics rendering in the web system according to the configured JSON data to obtain an editable online graphics file, the embodiment of the invention further comprises creating an online editor in the web system. The online editor includes a node canvas component, an online canvas component, and a toolbar component.

The online editor creating step comprises:

step 1401: and creating a flow node canvas assembly based on html, wherein the flow node canvas assembly is used for bearing the rendering of all the flow nodes.

Step 1402: a wiring canvas component is created based on svg, the wiring canvas component for carrying renderings of all the wirings.

Step 1403: creating a toolbar component based on the Document Object Model (DOM), wherein the toolbar component binds a drag event and is used for normally generating elements on a canvas. The toolbar component includes a preset process node tool and a link tool. Wherein the toolbar component is composed of DOM elements for normal generation of the elements on the canvas. According to the toolbar component, JavaScript is used for bottom layer front end support through a large amount of DOM operation, various connection scenes are analyzed and judged, and therefore all dragging operations of a user are achieved. The toolbar component may enable online editing of online graphical files.

In the embodiment of the present invention, performing graphics rendering in the web system according to the configured JSON data to obtain an editable online graphics file, includes:

reading attribute information of each process node in the corresponding configured JSON data according to the html tag, and rendering each process node based on the html;

and reading the attribute information of each connecting line in the corresponding configured JSON data according to the svg tag, and rendering each connecting line based on the svg.

Specifically, for the html tag, reading data in the JSON, determining attribute information of the data so as to determine the type of a flow node, and determining whether rendering is required.

And for the svg tag, reading data in JSON, and determining corresponding connection attribute information so as to edit the connection.

Through the rendering, the visio graphic file is converted into an editable online graphic file in the web system.

The presentation style of the online graphic file is realized through the style attribute of the CSS, so that a smooth animation effect is realized, and the problem of pause in the rendering process is solved.

The html of the embodiment of the present invention is html5, which itself has a basic html5 tag. The svg container is a vector graphics tag of html 5. By the vector graphics label SVG of html5, the label form is not distorted, the performance is good, and the conditions of various scenes, misoperation and the like in a high interaction state can be met; meanwhile, the SVG label is absolutely positioned, and can be accurately displayed in a user operable area by effectively combining the size and the position of the canvas where the SVG label is positioned; in addition, based on the support of the SVG label, the flow connecting line can be quickly rendered into the canvas, and delayed loading can not occur.

Step 150: and displaying the editable online graphic file.

After the editable online graphic file is obtained, the editable online graphic file is displayed in an online editor of the web system.

In the embodiment of the present invention, after displaying the editable online graphic file, the method further includes:

step 160: receiving a triggered event, determining a corresponding action according to the binding information of the triggered event, and editing the online graphic file according to the corresponding action to obtain an edited graphic file.

The toolbar component of the online editor comprises four preset process nodes, namely a start node, an end node, a judgment node and a link node. And the toolbar component binds the drag events through a javaScript mouse event mechanism, wherein the drag events comprise drag events formed by drag actions such as selection, holding, dragging and the like. When dragging actions such as selection, holding, dragging and the like occur, dragging events such as selection, holding, dragging and the like are identified in mouseDown event monitoring, and therefore the flow nodes are added to the canvas.

Wherein, the online editor also respectively associates a mouse operation event, a keyboard event and an anchor point trigger event.

In particular, the online editor can perform node movement on the canvas through listening for mouse operation events. And monitoring mouse operation events through a javaScript mouse event mechanism. The mouse operation event comprises mouse operations such as pressing and moving a cursor, releasing a mouse and the like. For link editing, a key value of a node starting a process is firstly identified in the monitor down event monitoring, a monitor above event monitors a link track and renders the link track to a canvas in real time, a monitor up event monitors whether a mouse is released on a target node, if so, the link between the nodes is completed and recorded in JSON data. A user can press and hold a moving cursor by operating a mouse, coordinate information related to the process node and related connecting lines are tracked and changed in real time along with position movement, and the current dragging is finished after the mouse is released. The online editor can also select nodes on the canvas through monitoring of mouse operation events. Click events are bound for existing and future generated flow nodes by JavaScript. When the click event is monitored to generate a highlighted cs style effect, the only node which is operated currently is recorded, so that the operation behavior is unique. The HTML document element also registers a click event function for canceling highlighting so as to cancel the highlighting style and remove the information record of the selected node.

Wherein the online editor can perform deletion and text editing on the canvas through listening of keyboard events. Registering a keyboard event through JavaScript, adding a function for deleting a Node for a delete key, recording a currently selected Element in real time according to a highlighted Node, and triggering the Element Node on the DOM tree and corresponding Node information on JSON data. Registering a double-click event for the flow node through JavaScript, double-clicking a mouse to convert the current node into an editing state, wherein a text field contains an information text stored by JSON data, and clicking a documentNode (blank) to confirm to change and update the JSON data to realize data storage after the editing is finished. The deleting node and the connecting line can use a deleting button and a keyboard delete key of the information panel, the editing node can input a text in the information panel and click a saving button to realize node name modification, and can also click a node twice to directly modify the node and directly click and confirm in a blank position of a canvas after the editing is finished.

The online editor can perform online operation on the canvas through monitoring of the anchor point trigger event. In the embodiment of the invention, each process node is provided with four anchor points as a starting point and an end point of a connecting line. And each process node is associated with the fromPart and topPart of each link Object in the JSON data lines Object. The method comprises the steps of obtaining ID values of upper, lower, left and right end points of various process nodes, recording and storing corresponding ID values and recording source process node IDs after registering a trigger event for an anchor point, recording target process node IDs after dragging and connecting lines are successfully completed, forming a new connecting line object by the information, adding the new connecting line object into JSON data, and transmitting the connecting line object to a smart Transenderline class to realize SVG element rendering.

Thus, with the above arrangement, a user is enabled to edit the online graphic file on the canvas of the online editor.

In the embodiment of the invention, when the online graphic files are editable, the online graphic files related to a plurality of business processes can be associated, and corresponding associated information is correspondingly added into JSON data, so that the detailed information of the business processes can be associated to the process links.

The online editor carries out the operation of editing state and non-editing state through the information panel. In the editing state, configuration information such as process link names, input/output interfaces, services and the like can be edited. The process links refer to link name labeling according to the process links corresponding to the process nodes of the online graphic file. And in the non-editable state, the corresponding flow related information can be displayed by clicking the flow link.

In the embodiment of the invention, after the edited graphic file is obtained, the edited graphic file is saved in the web system.

According to the embodiment of the invention, the vi s io file uploaded to the system from the local is analyzed and converted into the target format data, and the editable online graphic file is obtained by rendering in the system according to the target format data, so that the user can edit the uploaded vi s io graphic file online in the web system.

Furthermore, the embodiment of the invention can furthest exert the efficiency of the business information contained in the vi s io graphic file by related and marking the detailed business process information in the editable online graphic file.

Fig. 2 is a schematic structural diagram illustrating an embodiment of a visio graphic file online editing apparatus according to the present invention. As shown in fig. 2, the apparatus 200 includes: file acquisition module 210, parsing module 220, configuration module 230, rendering module 240, and display module 250.

The file obtaining module 210 is configured to obtain a visio graph file, where the visio graph file is a visio file uploaded to a web system from a local location;

the parsing module 220 is configured to parse the visio graph file into configurable JSON data;

the configuration module 230 is configured to configure the configurable JSON data to obtain configured JSON data;

the rendering module 240 is configured to perform graphics rendering in the web system according to the configured JSON data to obtain an editable online graphics file;

and the display module 250 is used for displaying the editable online graphic file.

The specific working process of the online editing device for the visio graphic files in the embodiment of the invention is the same as the specific steps of the online editing method for the visio graphic files, and is not described herein again.

Fig. 3 is a schematic structural diagram illustrating an embodiment of a online editing apparatus for a visio graphic file according to the present invention, and the specific embodiment of the present invention does not limit the specific implementation of the online editing apparatus for a visio graphic file.

As shown in fig. 3, the visio graphic file online editing apparatus may include: a processor (processor)302, a communication Interface 304, a memory 306, and a communication bus 308.

Wherein: the processor 302, communication interface 304, and memory 306 communicate with each other via a communication bus 308. A communication interface 304 for communicating with network elements of other devices, such as clients or other servers. The processor 302 is configured to execute the program 310, and may specifically perform the relevant steps in the above embodiment of the method for online editing of a visio graphic file.

In particular, program 310 may include program code comprising computer-executable instructions.

The processor 302 may be a central processing unit CPU, or an Application Specific Integrated Circuit (ASIC), or one or more Integrated circuits configured to implement an embodiment of the present invention. The online editing device for the visio graphic files comprises one or more processors which can be the same type of processor, such as one or more CPUs; or may be different types of processors such as one or more CPUs and one or more ASICs.

And a memory 306 for storing a program 310. Memory 306 may comprise high-speed RAM memory and may also include non-volatile memory (non-volatile memory), such as at least one disk memory.

Specifically, the program 310 may be invoked by the processor 302 to cause the online editing apparatus for a visio graphic file to perform the following operations:

analyzing the visio graphic file into configurable JSON data;

configuring the configurable JSON data to obtain configured JSON data;

and displaying the editable online graphic file.

In an optional manner, parsing the visio file into JSON data includes:

acquiring xml data of the visio file;

analyzing the xml data into configurable JSON data;

the JSON data comprises process node information and connection information.

receiving a triggered event;

The embodiment of the invention provides a computer-readable storage medium, wherein at least one executable instruction is stored in the storage medium, and when the executable instruction runs on a visio graphic file online editing device/apparatus, the visio graphic file online editing device/apparatus is enabled to execute the visio graphic file online editing method in any method embodiment.

The executable instructions may be specifically configured to cause a visio graphical file online editing device/apparatus to perform the following operations:

analyzing the visio graphic file into configurable JSON data;

configuring the configurable JSON data to obtain configured JSON data;

and displaying the editable online graphic file.

In an optional manner, parsing the visio file into JSON data includes:

acquiring xml data of the visio file;

analyzing the xml data into configurable JSON data;

the JSON data comprises process node information and connection information.

receiving a triggered event;

The embodiment of the invention provides a visio graphic file online editing device which is used for executing the visio graphic file online editing method.

Embodiments of the present invention provide a computer program, where the computer program can be called by a processor to enable a visio graphics file online editing device to execute a visio graphics file online editing method in any of the above method embodiments.

Embodiments of the present invention provide a computer program product, which includes a computer program stored on a computer-readable storage medium, where the computer program includes program instructions, and when the program instructions are run on a computer, the computer is caused to execute a method for online editing of a visio graphics file in any of the above method embodiments.

The algorithms or displays presented herein are not inherently related to any particular computer, virtual system, or other apparatus. Various general purpose systems may also be used with the teachings herein. The required structure for constructing such a system will be apparent from the description above. In addition, embodiments of the present invention are not directed to any particular programming language. It is appreciated that a variety of programming languages may be used to implement the teachings of the present invention as described herein, and any descriptions of specific languages are provided above to disclose the best mode of the invention.

In the description provided herein, numerous specific details are set forth. It is understood, however, that embodiments of the invention may be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been shown in detail in order not to obscure an understanding of this description.

Similarly, it should be appreciated that in the foregoing description of exemplary embodiments of the invention, various features of the embodiments of the invention are sometimes grouped together in a single embodiment, figure, or description thereof for the purpose of streamlining the invention and aiding in the understanding of one or more of the various inventive aspects. However, the disclosed method should not be interpreted as reflecting an intention that: that the invention as claimed requires more features than are expressly recited in each claim.

Those skilled in the art will appreciate that the modules in the device in an embodiment may be adaptively changed and disposed in one or more devices different from the embodiment. The modules or units or components of the embodiments may be combined into one module or unit or component, and may be divided into a plurality of sub-modules or sub-units or sub-components. All of the features disclosed in this specification (including any accompanying claims, abstract and drawings), and all of the processes or elements of any method or apparatus so disclosed, may be combined in any combination, except combinations where at least some of such features and/or processes or elements are mutually exclusive. Each feature disclosed in this specification (including any accompanying claims, abstract and drawings) may be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.

It should be noted that the above-mentioned embodiments illustrate rather than limit the invention, and that those skilled in the art will be able to design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in a claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The invention may be implemented by means of hardware comprising several distinct elements, and by means of a suitably programmed computer. In the unit claims enumerating several means, several of these means may be embodied by one and the same item of hardware. The usage of the words first, second and third, etcetera do not indicate any ordering. These words may be interpreted as names. The steps in the above embodiments should not be construed as limiting the order of execution unless specified otherwise.

Claims

1. A method for online editing of a visio graphic file, the method comprising:

analyzing the visio graphic file into configurable JSON data;

configuring the configurable JSON data to obtain configured JSON data;

and displaying the editable online graphic file.

2. The method of claim 1, wherein parsing the visio file into JSON data comprises:

acquiring xml data of the visio file;

analyzing the xml data into configurable JSON data;

the JSON data comprises process node information and connection information.

3. The method of claim 2, wherein the configuring the JSON data to obtain configured JSON data further comprises:

4. The method according to claim 3, wherein before performing graphics rendering in the web system according to the configured JSON data to obtain an editable online graphics file, the method further comprises:

5. The method of any of claims 1-4, after presenting the editable online graphical file, further comprising:

receiving a triggered event;

6. An apparatus for online editing of a visio graphic file, the apparatus comprising:

and the display module is used for displaying the editable online graphic file.

7. The apparatus of claim 6, wherein parsing module parses the visio file into JSON data comprises:

acquiring xml data of the visio file;

analyzing the xml data into configurable JSON data;

the JSON data comprises process node information and connection information.

8. The apparatus of claim 6, wherein the configuration module configures the JSON data to obtain configured JSON data, and further comprising:

9. A visio graphics file online editing apparatus, comprising: the system 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 used for storing at least one executable instruction, and the executable instruction causes the processor to execute the operation of the online editing method of the visio graphic file according to any one of claims 1-5.

10. A computer-readable storage medium, wherein the storage medium has stored therein at least one executable instruction, which when executed on a visio graphics file online editing apparatus/device, causes the visio graphics file online editing apparatus/device to perform the operations of the visio graphics file online editing method according to any one of claims 1-5.