FlowChart (WebWidget)
Displays flow diagrams/flow charts and allows them to be edited. The appearance of the cells and connections is freely configurable.
Use
Dependencies
- flowChart.html
- flowChart-directive.js
- dependencies
- mxGraph/*
- flowChartMxGraphConfig.xml
- flowChartNodeContainer.html
- flowChart.css
- ResizeSensor.js
Edit mode
The editing mode is active when editable is set to true. Regardless of the editing mode, the view can always be moved and zoomed via the mouse wheel while the secondary mouse button is pressed.
By double-clicking on a cell, its content can be changed. The editable content for blocks is either a reference or a list of states/labels that are interpreted as events . The individual connection points are separated by semicolons. For connections, the content represents the enumeration of triggers . A context menu can be called up by clicking with the secondary mouse button. This can be used to interact with the clipboard, remove the cell or create an image of the graph. In addition, the appearance of individual cells can be adjusted. In order for the style property to be dependent on the style of the cell type again, the style change input must be confirmed with empty input. The referenced object for referencing cells can be requested again after a change using the context menu button "Reload".
The Container block on the right-hand side can be used to create new cells of the corresponding type by dragging and dropping.
| Toolbar element | Description |
|---|---|
| New | Sends the create_new message. |
| Save | Triggers the save_flows message. |
| Undo the last change. | |
| Repeat the last change that was undone. | |
| Select | Changes the editing mode to "select". In this mode, new cells can be created by dragging and dropping from the BlockConatiner and existing cells can be edited. With the primary mouse button held down, several graph elements can be selected at once. |
| Connect | Changes the editing mode to "connect". In this mode, everything is possible that is possible in select mode. In addition, it is possible to create new connections by dragging the mouse pointer from the centre of a cell to another cell. To do this, the primary mouse button must remain pressed. |
| Move | No cells can be selected. Instead, the graph can also be moved by pressing the primary mouse button. This mode is also active when the edit mode is not active. |
| Analyse | Starts an analysis of the currently opened FlowCharts. What is to be analysed can be defined via the Analyze object of the configuration. |
| Apply layout | Allows a quick structured rearrangement of the cells. |
| View | Allows you to change the view and display an overview of the FlowChart. |
Message interface
In the directional description, the WebWidget is divided into its two components. The WebWidget implemented in HTML, which implements the display logic and user interaction in the browser, and the WebWidget implemented in InstantView, which provides the other side with the data from ClassiX and controls it.
| Name | Parameter | Description |
|---|---|---|
| Push messages (IV→HTML) | ||
| set_config | Config | This message changes the setting to the one passed. If settings are not specified, the default setting specified in the Config object is used. |
| merge_config | Config | This message changes the setting to the one passed. If settings are not specified, the previously used setting is used. |
| Array (WrappedBlock|NULL) | Use this message to respond to the "request" message.This message adds blocks to the WebWidget and continues the action that requested those blocks. Non-existing blocks are represented by NULL. | |
| update_block | WrappedBlock | This message overwrites or adds a block. |
| open_flow | WrappedBlock | This message opens the passing FlowChart. |
| Events (HTML→IV) | ||
| initialize | - | This message is the first message that the WebWidget sends once it has initialised. It signals that push messages can now be received and processed. |
| save_flows | Array (WrappedBlock) | This message sends an array of FlowCharts to be saved. Sent when the "Save" button is pressed. |
| open | Open | This message signals that the block to which the reference refers is to be opened. |
| request | Request | This message signals that blocks are needed. The message add_requested_blocks should be sent in response. |
| create_new | - | Sent when the New button is pressed, indicating that a new FlowChart is to be created. |
The Config object
| Field | Type | Default | Description |
|---|---|---|---|
Boolean | true | Whether to display the BlockContainer. | |
Boolean | true | Whether the FlowCharts are editable. | |
newCanBeCreated | Boolean | false | Whether buttons for creating new FlowCharts should be displayed. A create_new message is sent when this button is pressed. |
limitConnectionDrawing | Boolean | false | Whether the number of declared connection points should limit the number of connections that can be drawn. |
defaultCellType | String | "flow" | The cell type of new cells that are created when a created connection has no target cell. An empty string means that connections without a connector are not created. |
| cellTypeOfFlows | String | "flow" | Which cell type FlowCharts have. FlowCharts can also have other cell types, but then the outgoing connections are not automatically determined. |
stylesheet | JSON object | edge: { | Sets the appearance of the cells based on their cell type. Format: {Name :Style}. The appearance of a connection is determined by the style object with the name/key "edge". The default appearance is set by the style object with the name/key "defaultVertex". |
JSON object | { "flow": { "canBeOpened": true } } | Sets the properties of the cells. Format: {CellTypeName :CellType} | |
analyse | Analyze | true | { "tooManyConnectionPointsDeclared":false "endlessLoops": false, "unreachableBlock": false, "notEndingWithSpecifiedBlockType": false, "notAllOutputsConnected": false, "outputNotExist": false, "outputNotSpecified": false, "outputConnectedMoreThanOnce": false, "referenceNotFound": false, "referenceNotSpecified": false } | Specifies which analyses are to be performed for a flow. If true is passed, all analyses are performed. |
importSettings | { { "codeCellType": "action", "pageCellType": "page", "unify": true, "defaultOkConnectionPoint": "OK". } | Sets the import behaviour of .vpfdx flows and their required files. | |
| neededEndTypes | JSON object | {} | Determines on which types a flow may end and whether the flow must end after one of these types, i.e. does not allow outgoing connections even if events are present. Format: {CellTypeName:Boolean} |
| Array(String) | Empty array | The cell types that mark the start or entry points of a flow. Required for several analyses . Does not have to be set if none of the corresponding analyses are to be performed. |
The style object
The Style object defines the default appearance of all cells whose CellType has this style. In the Celltype, the style is referenced by the name assigned in the stylesheet.
If a field is not specified, the value of the style defaultVertex is used. Thus, no field is obligatory.
| Field | Type | Description |
|---|---|---|
width | height | The standard width of the cell. |
height | height | The standard height of the cell |
show | Array(String) | Which fields should be displayed in which order on the cell. Possible values are: "value", "id", "type" and "name". For "type" the cell type is displayed, for "name" the (referenced) name, for "id" the ID of the cell and for "value" either the reference or, if it is not a referencing block, the events. |
editable | Boolean | Whether the value / reference of a cell is editable. |
connectable | Boolean | Whether the cell allows an incoming or outgoing connection. The cell is only connectable if the style and cell type do not prohibit it. |
shape | String | The shape of the cell. The shapes are: "rectangle", "triangle", "rhombus", "hexagon", "cylinder", "cloud", "parallelogram", "ellipse" and "doubleEllipse". |
rounded | Boolean | Whether the corners of the shape should be rounded. |
fonzSize | Number | The font size of the text on the cell. |
align | String | The horizontal alignment of the text on the cell. Possible alignments are: "left", "centre" "right". |
verticalAlign | String | The vertical alignment of the text on the cell. Possible alignments are: "top", "middle" "bottom". |
fillColor | String | The colour that fills the cell. Possible values are HTML colour names and hex codes. |
fontColor | String | The colour of the font on the cell. Possible values are HTML colour names and hex codes. |
strokeColor | String | The colour of the border of the cell. Possible values are HTML colour names and hex codes. |
| overflow | String | Whether overflowing text should be displayed. Possible values: "visible" and "hidden". |
For more style options, see STYLE_ Constants at https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxConstants-js.html
The CellType object
The cell type describes the properties of a cell
| Field | Type | Default | Description |
|---|---|---|---|
| canBeCreated | Boolean | false | Determines whether empty cells of this cell type can be created from the block container. |
| style | String | "defaultVertex" | The name of the style object to use. |
| maxOut | Integer | -1 | The number of possible outgoing connections. -1 means infinite. If createAsRef is set, then this value is overwritten by the number of events of the referenced block. |
| connectable | Boolean | true | Whether a connection can be made with cells of this type. A cell will only accept an incoming connection if the style allows it. |
description | String | "" | A description of the cell type, which is displayed in the BlockContainer. |
| canBeOpened | Boolean | false | Determines whether blocks of this type can be opened. If a block can be opened, then there is another button in the content menu that can be used to send the open message. Prerequisite: CreateAsRef is true. |
| createAsRef | Boolean | false For type specified under cellTypeOfFlows always true | Whether the cell type is a reference type, i.e. its content is a reference. Is a prerequisite for canBeOpened. |
| Boolean | false | Determines whether the reference of the opened FlowCharts is appended to the reference if the reference of the block does not contain a dot. To then refer to an element with a reference without a dot, the prefix "root." (without inverted commas) must be used. Only taken into account if createAsRef is set. |
The FlowChart object
The FlowChart object represents a FlowChart that can be displayed. Description and viewPosition are optional and are automatically generated when used.
| Field | Type | Description |
|---|---|---|
| name | String | The name of the FlowChart. The reference to a FlowChart is composed of the path and the name: (path.)name There is no distinction between upper and lower case. |
| path | String | The path / specification of the FlowCharts. Individual specifiers are separated with a dot. The reference to a FlowChart is composed of the path and the name: (path.)name There is no distinction between upper and lower case. |
| content | Array (block) | All cells and connections of the FlowCharts. |
| description | String | The optional description of the FlowCharts |
| viewPosition | ViewPosition | The position and scale of the FlowCharts in the view. |
The block object
The Block object represents a cell in a FlowChart or a block from which a cell can be created or to which a cell can refer.
| Field | Type | Description |
|---|---|---|
| Only if the block is a cell | ||
| geometry | Geometry | The position and size of the cell |
| style | String | The name of the style object that defines the appearance of this cell. Separated by a semicolon, individual field changes of the style object can optionally be listed. |
| id | String | A unique numeric ID in the FlowChart. Must be at least "2". |
| type | String | The name of the cell type of the cell. |
| Only if type is "edge | ||
| source | String | The ID of the cell from which the connection should originate. |
| target | String | The ID of the cell to which the connection should go. |
| Array(String) | On which events this transition should be triggered. | |
| Only if type is not "edge" and the block is a referencing cell. | ||
| contentRef | String | The reference to the block or FlowChart that holds the actual information. The reference to a block is composed of the path and the name: (path.)name. If pathCanBeRelative is true for the cell type, then only the name can be specified, whereby the reference from the FlowChart is appended at the front. This can be circumvented by the pseudo path "root". This field is not present if the block already holds the actual information. |
| Only if type is not "edge" and the block is not a referencing cell (contentRef is not set). | ||
| name | String | The name of the block. The reference to a block is composed of the path and the name: (path.)name There is a distinction between upper and lower case. |
| path | String | The path / specifier of the block. Individual specifiers are separated with a dot. The reference to a block is composed of the path and the name: (path.)name There is no distinction between upper and lower case. |
| events | Array(String) | An array indicating which outgoing events this block has. |
| description | String | The description of the block |
extraTooltipFields | JSON object | This field can be used to add other fields to the tooltip of the block in addition to the description. |
The WrappedBlock object
The WrappedBlock object is a wrapper object around a Block or FlowChart object that also holds the directory from where it was loaded.
| Field | Type | Description |
|---|---|---|
| content | FlowChart | Block | The FlowChart to be opened or saved. |
| directory | String | From which subdirectory (starting after the root directory of all FlowChart data) the FlowChart was loaded or in which it is to be saved. |
The ViewPosition object
| Field | Type | Description |
|---|---|---|
| x | Number | The X-coordinate of the position of the view. |
| y | Number | The Y coordinate of the position of the view. |
| scale | Number | The scaling of the view |
The Geometry object
| Field | Type | Description |
|---|---|---|
| x | Number | The X coordinate of the block in the FlowChart. |
| y | Number | The Y-coordinate of the block in the FlowChart. |
| height | Number | The height of the block or label of a connection. |
| width | Number | The width of the block or label of a connection. |
| Only if the block represents a connection. | ||
| points | Array(JSON object) | The absolute position of the bend points of a connection, The JSON object for the points has the following format: {x:Number,y:Number} |
The ImportSettings object
Describes the import behaviour when importing vpfd files. The cell type of CALL blocks is specified by cellTypeOfFlows.
| Field | Type | Default | Description |
|---|---|---|---|
| actionCellType | String | "action" | Specifies which cell type imported code blocks of type action will have. |
| decisionCellType | String | "decision" | Specifies which cell type imported code blocks of type DECISION will have. |
| pageCellType | String | "page" | Specifies which cell type imported blocks of type PAGE will have. |
| endCellType | String | "end" | Specifies which cell type imported code blocks of type END will have. |
| startCellType | String | "start" | Specifies which cell type imported code blocks of type START will have. |
| defaultOkConnectionPoint | String | - | "" | Specifies the name by which the names of the connection points of code and call/flow blocks that have only one connection point are to be unified. If no string is passed, no unification of the outputs takes place. |
| ignoreObsolete | Boolean | false | Determines whether blocks marked as obsolete should be skipped during import. All directories ending with .obsolete or starting with an underscore and all files starting with an underscore are marked as obsolete. If this field is set to false, then the marking is removed from the imported name and the description of the blocks is set to "obsolete". |
The Open object
| Field | Type | Description |
|---|---|---|
| reference | String | The reference of the block/flow chart to be opened. |
| type | String | The CellType of the block to be opened. |
| sourceRef | String | The reference of the FlowCharts from which the request originates. |
sourceDirectory | String | The subdirectory in which to start searching for the block or FlowChart. All parent subdirectories should be searched. |
The request object
| Field | Type | Description |
|---|---|---|
| sourceRef | String | The reference of the FlowCharts from which the request originates. |
| requests | Array (Open without the sourceRef and sourceDirectory fields). | Description of the blocks/FlowCharts that are requested. |
sourceDirectory | String | The subdirectory in which to start searching for the blocks or FlowChart. All parent subdirectories should be searched. The directory from which the requested FlowChart was opened is passed. |
The Analyze object
The Analyze object specifies which analyses are to be performed. An analyse is always performed when a flow is loaded or by pressing the Analyze button.
The type of all fields is Boolean.
| Field | Description |
|---|---|
tooManyEventsDeclared | If true, then it is checked whether more events have been defined for a cell than maxOut of the cell type allows for connections. Affected cells are marked with a warning. Cells that do not allow outgoing connections, i.e. always mark the end of a flow, are ignored. |
| endlessLoops | If true, then it is checked whether there are endless loops, i.e. loops in which there is no longer any possibility of reaching the end of the flow. Affected cells are marked with a warning. Prerequisite: EntryPointTypes is set. |
| unreachableBlock | If true, then it is checked whether each cell can be reached. Cells that cannot be reached are marked with a warning. Prerequisite: EntryPointTypes is set. |
| eventNotExist | If true, then it is checked whether the corresponding events exist for the trigger specified for a connection. If the cell from which the connection originates does not have the specified event, the connection is marked with a warning. If the CellType of the cell where the connection starts is equal to cellTypeOfFlows, then this warning is only displayed if neededEndTypes is not empty and createAsRef is not set for any containing cell type. |
| notEndingWithSpecifiedBlockType | If true and neededEndTypes contains at least one type, then it is checked whether cells at which the flow ends are of the corresponding type. If the cells are of a different type, they are marked with an error. Prerequisite: EntryPointTypes is set. |
| notAllEventsConnected | If true, then it is checked whether corresponding triggers are set for all events. If no trigger responds to an event, then the cell is marked with a warning. Cells where the flow ends, i.e. have no outgoing connections, are ignored. If the CellType of the cell is equal to cellTypeOfFlows, then this warning is only displayed if neededEndTypes is not empty and all for none containing cell type createAsRef is set. |
| triggerNotSpecified | If true, then it is checked whether a trigger is specified for each connection. If none is specified, the connection is marked with an error. |
eventConnectedMoreThanOnce | If true, then it is checked that each event of a cell is set as a trigger by at most one connection. If an event is selected multiple times, then the affected connections are marked with an error. |
| referenceNotFound | If true, then it is checked for each referencing cell whether the specified reference refers to a block of the same cell type. If no block is found, the cell is marked with an error. |
| referenceNotSpecified | If true, then it is checked that for any cell with a celltype where createAsRef is set, a reference has been specified. If a reference is missing, the cell in question is marked with an error. |
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}