Web Online flowchart Designer Gooflow based on jquery

1. Gooflow features 1.1 cross-browser

Compatible with Ie7--ie10, FireFox, Chrome, opera and other major kernel browser, and do not need to add any control browser.

1.2 Multi-system compatibility, portability

Because only the front-end UI, so two times developers can be very convenient to use the plug-in in any one of the needs of the B/s system application, flowchart of the detailed implementation of the logic completely in the background program developers to achieve their own; for the backstage, as long as can return/ Receive JSON-formatted data that can be parsed by this plugin. So this plugin can be used for different server languages established in the background.

1.3 Cross-cutting

The flowchart designer is not only used in telecommunications, but has a significant role in other areas where it is needed for technical support.

2, Gooflow realization

• The top bar of the page, the left sidebar can be customized;

• When the left sidebar is set to not display, it is read-only, and the view area at this time can be viewed as a viewer instead of an editor.

• Side toolbar In addition to the basic and some process node buttons, but also customize the new node button, the custom node can have its own icon, type name, after the definition of using cocoa in the workspace to add these custom nodes.

• The top bar displays the title of the Flowchart Data group, and also provides some common action buttons.

• The buttons on the top bar, in addition to the undo and Redo buttons, can customize the click events for the rest of the buttons.

• You can draw a line, a polyline, or a polyline to move a segment up or down.

• With the function of zoning, it gives the user a more intuitive understanding of which nodes and their conversions are within the custom region.

• With labeling function, with orange red to mark a node or conversion line, generally used in the process of showing progress.

• Can directly double-click the node, line, the text in the grouping area to edit

• Events can be captured during various editing operations on nodes, lines, and grouped areas, such as new/delete/modify name/reset style or size/move/callout, and trigger custom events, which will block the action if the method returned by the custom event is false.

• With the operation transaction sequence control function, all kinds of valid operations in the workspace can be recorded to a stack, then can be undone (undo ()) or Redo (Redo ()), like the typical C/s software.

• Version 0.8, cancel the original materialized page, become today's flat page, and support the color customization function of the main location (if you want to follow the original version of the materialized page, just keep the original gooflow.css file); Fix the line bug in version 0.7.

3. Gooflow interface

As shown in: The width of the workspace is twice times the visible area, the x, Y axis is the same as the top and left margins in the CSS style;

On the left is the Flowchart Drawing toolbar, from top to bottom: Select pointer, transform connector, start node, end node, task node, automatic node, decision node, State node, extended additional node, branch node, aggregation node, compound sub-process node; the last one is not a node. But the node line edit and the group area edit two kinds of workspace state toggle switch, when switches to the grouping area edits, only then operates the grouping area block, the node and the connection are locked;

The top is the action bar that displays the flowchart title and puts some function buttons, which are customizable by the user in addition to the system.

If the left and top action buttons are set in the initialization, the UI becomes a flowchart view/tracker.

Start node, end node is circular, composite node is green, the rest of the nodes are light blue rounded rectangle, double click the text in the node, you can directly edit;

Conversion line and direct and middle can move up and down the polyline, the middle can move around a total of three styles, double-click the line can directly edit the text of the line description content;

The sub-area needs the lower left corner of the switch is pressed to edit, there are four random colors, click on the upper left corner of the circle icon to change the color, double-click text can be directly edited.

When the node is selected:

When the connection is selected:

When the grouping area becomes operable:

4. Goolflow constructor function

Here the color of the main part of the configuration is: the color of the plotter head/icon, the node background color, the border color when the connection/node is selected, the color when the line is checked/The element is labeled, the composite node custom background color, and the font color.

If none of these are defined, the default color is automatically used.

5. Gooflow Object Internal Properties

If you need to know, you can view it in the attachment.

6. Gooflow Data Format

{    "title": "General manuscript Review Process",    "Initnum": 10,    "Nodes":{       "Appflow_node_1": {"name": "Start", "left": +, "top": 196, "type": "Task", "width":, "height": 24},       "Appflow_node_2": {"name": "Normal edit Audit", "left": 261, "Top": "," "Type": "Task", "width": 108, "height": 28},       "Appflow_node_3": {"name": "Editor director Audit", "left": 444, "top": 197, "type": "Task", "width": $, "height": 26},       "Appflow_node_4": {"name": "Director of Duty", "left": 616, "Top": PNs, "type": "Task", "width": "," "Height": 25},       "Appflow_node_5": {"name": "End", "left": 772, "top": 202, "type": "Task", "width": +, "height": 22}   },    "Lines":{       "Appflow_line_6": {"type": "SL", "from": "Appflow_node_1", "to": "Appflow_node_2", "name": "Interview", "marked":false},       "Appflow_line_7": {"type": "SL", "from": "Appflow_node_2", "to": "Appflow_node_3", "Name": "Preliminary Examination", "marked":false},       "Appflow_line_8": {"type": "SL", "from": "Appflow_node_3", "to": "Appflow_node_4", "name": "Retrial", "marked":false},       "Appflow_line_9": {"type": "SL", "from": "Appflow_node_4", "to": "Appflow_node_5", "name": "End Flow", "marked":false}    },    "Areas":{       "Demo_area_8": {"name": "Area_8", "left": +, "top": +, "color": "Red", "width": 850, "height": 220}    } }

7, angularjs instruction--goo-flow7.1 goo-flow command function

Add a process editor to configure related properties yourself

7.2 Gooflow instructions How to use

1. Configure Config

Configuring Config.property and Config.remark in the parent controller

2. Prepare the editor data jsondata

Gets the data in the routing resolve in the parent controller and saves

3. Introduce goo-flow instruction and pass in parameter config and Jsondata

<jsondata= "Jsondata"  config= "config"></  Goo-flow>

The link function of the directive loads the data according to the Config and Jsondata initialization process Editor

7.3 Instructions Detailed description 7.3.1, parent controller defines configuration and data

Config: There are two properties in an object

• Property defines the toolbar, editor-related properties
• Remark defining ToolTips for toolbars

Jsondata: Editor JSON data returned in the background, please refer to data format

7.3.2, instruction Goo-flow

A method is defined in the link function editnodes

Editnodes: Double click on Edit node, open modal box, edit node related information in modal box

• Creating a diagram Class $.creategooflow

Prams1{element} element node
Prams2{property} Configuration Object

• Toolbar tip Information Setnoderemarks

Prams{remark} Prompt Information Object

ExportData (): Is the export of JSON data

7.3.3, modal frame controller

Can be based on the name of the node to determine the relevant role, the specific function has not been written, so for the time being

8. Accessories

Annex I: Gooflow detailed API Designer API specification. doc

Annex II: Gooflow Demogooflow0.8.zip

Web Online flowchart Designer Gooflow based on jquery