sdrdis / jquery.flowchart

JQuery plugin that allows you to draw a flow chart.

jquery.flowchart

Javascript jQuery plugin that allows you to draw a flow chart. Take a look at the demo: http://sebastien.drouyer.com/jquery.flowchart-demo/

Description

jquery.flowchart.js is an open source javascript jQuery ui plugin that allows you to draw and edit a flow chart.

Here are the main functionalities provided so far:

• Draw boxes (called operators) and connections between them.
• Methods are provided so that the end-user can edit the flow chart by adding / moving / removing operators, creating / removing connections between them.
• The developper can save / load the flowchart.
• Operators and links can be customized using CSS and the plugin parameters.
• Some methods allow you to add advanced functionalities, such as a panzoom view or adding operators using drag and drop. Take a look at the advanced demo.

Context

This project is part of a bigger one, UltIDE which allows you to have a complete interface managing a flowchart and custom properties. Though it is still WIP, you are welcome to give it a try and contribute. A screenshot is shown below.

License

jquery.flowchart.js is under MIT license.

Authors

• Sebastien Drouyer - alias @sdrdis - for this jquery ui plugin

Contributors

• Simone Gasparini - alias @simmyg89 - for bug fixes and code formatting.
• Guijin Ding - alias @dingguijin - for bug fixes.
• M. Fatih Marabaoğlu - alias @MFatihMAR - for adding the uncontained parameter and improving the grid system.
• Peter Vavro - alias @petervavro - for adding mouse events.
• Mike Branham - alias @Mike-Branham - for bug fixes in the demo page.
• @zhangbg - for compatibility with IE9, IE10 and IE11.
• @elvaron - for bug fixes and adding the getLinksFrom and getLinksTo methods.
• Ziyi Wang - alias @ziyiwang - for bug fixes.
• @dogbull - for adding the getDataRef method.
• Yaroslav Zenin - alias @yaroslav-zenin - for big fixes.
• @lflfm - for bug fixes and new demo page.
• @neoera - for adding multiple sub connector with array support.
• Dima Shemendiuk - alias @dshemendiuk - for adding vertical flowchart support and access to operators's body.
• Ernani Azevedo - alias @ernaniaz - for adding the possibility to decide for each connector if there can be a single link and multiple links and for making the integration of features from the community much easier.

Documentation

Demo:

http://sebastien.drouyer.com/jquery.flowchart-demo/

Terminology:

Options:

• canUserEditLinks (default: true): Can the user add links by clicking on connectors. Note that links can be removed during the process if multipleLinksOnInputof multipleLinksOnOutputare set to false.

• canUserMoveOperators (default: true): Can the user move operators using drag and drop.

• data (default: {}): Initialization data defining the flow chart operators and links between them.

  • operators: Hash defining the operators in your flow chart. The keys define the operators ID and the value define each operator's information as follow:

    • top (in px)
    • left (in px)
    • type: (optional) The type of the operator. See data.operatorTypes.
    • properties:
      • title
      • body
      • uncontained: (optional, default: false) If true, the operator can be moved outside the container.
      • class: css classes added to the operator DOM object. If undefined, default value is the same as defaultOperatorClass.
      • inputs: Hash defining the box's input connectors. The keys define the connectors ID and the values define each connector's information as follow:
        • label: Label of the connector. If the connector is multiple, '(:i)' is replaced by the subconnector ID.
        • multipleLinks: (optional) If true, allow multiple links to this connector.
        • multiple: (optional) If true, whenever a link is created on the connector, another connector (called subconnector) is created. See the multiple connectors demo.
      • outputs: Hash defining the box's output connectors. Same structure as inputs.

  • links: Hash defining the links between your operators in your flow chart. The keys define the link ID and the value define each link's information as follow:

    • fromOperator: ID of the operator the link comes from.
    • fromConnector: ID of the connector the link comes from.
    • fromSubConnector: (optional) If it is a multiple connector, which subconnector is it.
    • toOperator: ID of the operator the link goes to.
    • toConnector: ID of the connector the link goes to.
    • toSubConnector: (optional) If it is a multiple connector, which subconnector is it.
    • color: Color of the link. If undefined, default value is the same as defaultLinkColor.

  • operatorTypes: (optional) Hash allowing you to define common operator types in order to not repeat the properties key. Key define the operator's type ID and the value define the properties (same structure as data.operators.properties).

• verticalConnection (default: false): Allows to build vertical-connected flowcharts. WARNING: When using vertical connectors, avoid using multiple connectors, because it will break layout.

• distanceFromArrow (default: 3): Distance between the output connector and the link.

• defaultLinkColor (default: '#3366ff'): Default color of links.

• defaultSelectedLinkColor (default: 'black'): Default color of links when selected.

• defaultOperatorClass (default: 'flowchart-default-operator'): Default class of the operator DOM element.

• linkWidth (default: 11): Width of the links.

• grid (default: 20): Grid of the operators when moved. If its value is set to 0, the grid is disabled.

• multipleLinksOnInput (default: false): Allows multiple links on the same input connector.

• multipleLinksOnOutput (default: false): Allows multiple links on the same output connector.

• linkVerticalDecal (default: 0): Allows to vertical decal the links (in case you override the CSS and links are not aligned with their connectors anymore).

• onOperatorSelect (default: function returning true): Callback method. Called when an operator is selected. It should return a boolean. Returning false cancels the selection. Parameters are:

  • operatorId: ID of the operator.

• onOperatorUnselect (default: function returning true): Callback method. Called when an operator is unselected. It should return a boolean. Returning false cancels the unselection.

• onOperatorMouseOver (default: function returning true): Callback method. Called when the mouse pointer enters an operator. It should return a boolean. Returning false cancels the selection. Parameters are:

  • operatorId: ID of the operator.

• onOperatorMouseOut (default: function returning true): Callback method. Called when the mouse pointer leaves an operator. It should return a boolean. Returning false cancels the unselection.

• onLinkSelect (default: function returning true): Callback method. Called when a link is selected. It should return a boolean. Returning false cancels the selection. Parameters are:

  • linkId: ID of the link.

• onLinkUnselect (default: function returning true): Callback method. Called when a link is unselected. It should return a boolean. Returning false cancels the unselection.

• onOperatorCreate (default: function returning true): Callback method. Called when an operator is created. It should return a boolean. Returning false cancels the creation. Parameters are:

  • operatorId: ID of the operator.
  • operatorData: Data of the operator.
  • fullElement: Hash containing DOM elements of the operator. It contains:
    • operator: the DOM element of the whole operator.
    • title: the DOM element of the operator's title.
    • connectorArrows: the DOM element of the connectors' arrows.
    • connectorSmallArrows: the DOM element of the connectors' small arrows.

• onOperatorDelete (default: function returning true): Callback method. Called when an operator is deleted. It should return a boolean. Returning false cancels the deletion. Parameters are:

  • operatorId: ID of the operator.

• onLinkCreate (default: function returning true): Callback method. Called when a link is created. It should return a boolean. Returning false cancels the creation. Parameters are:

  • linkId: ID of the link.
  • linkData: Data of the link.

• onLinkDelete (default: function returning true): Callback method. Called when a link is deleted. It should return a boolean. Returning false cancels the deletion. Parameters are:

  • linkId: ID of the link.
  • forced: The link deletion can not be cancelled since it happens during an operator deletion.

• onOperatorMoved (default: function): Callback method. Called when an operator is moved. Parameters are:

  • operatorId: ID of the operator.
  • position: New position of the operator.

• onAfterChange (default: function): Callback method. Called after changes have been done (operator creation for instance). Parameters are:

  • changeType: What change did occur. Can be one of these strings:
    • operator_create
    • link_create
    • operator_delete
    • link_delete
    • operator_moved
    • operator_title_change
    • operator_body_change
    • operator_data_change
    • link_change_main_color

Events

All callbacks (options with a name that begins with "on") have their event counterpart. For instance, the callback onOperatorSelect(operatorId) has an equivalent event that can be handled using $(flowchartEl).on('operatorSelect', function(el, operatorId, returnHash) { /* your code here */ }), where flowchartEl is the DOM element of the flowchart.

If onOperatorSelect doesn't return false, the event operatorSelect is triggered, and the final return value will be returnHash['result']. The behaviour is similar for all callbacks.

Functions

Operators:

• createOperator(operatorId, operatorData):

  • Parameters:
    • operatorId
    • operatorData: Same as in data.operators.

• addOperator(operatorData):

  • Description: Same as createOperator, but automatically sets the operator's ID.
  • Parameters:
    • operatorData: Same as in data.operators.
  • Return: The operator's ID.

• deleteOperator(operatorId):

  • Parameters:
    • operatorId

• getSelectedOperatorId():

  • Return: The operator ID if one is selected, null otherwise.

• selectOperator(operatorId):

  • Parameters:
    • operatorId

• unselectOperator():

• addClassOperator(operatorId, className):

  • Parameters:
    • operatorId
    • className: Class name to add.

• removeClassOperator(operatorId, className):

  • Parameters:
    • operatorId
    • className: Class name to remove.

• removeClassOperators(className):

  • Parameters:
    • className: Remove class name from all operators.

• setOperatorTitle(operatorId, title):

  • Parameters:
    • operatorId
    • title: The operator's new title to be set.

• setOperatorBody(operatorId, body):

  • Parameters:
    • operatorId
    • body: The operator's new body html to be set.

• getOperatorTitle(operatorId):

  • Parameters:
    • operatorId
  • Return: The operator's title.

• getOperatorBody(operatorId):

  • Parameters:
    • operatorId
  • Return: The operator's body.

• doesOperatorExists(operatorId):

  • Description: This method checks whether or not an operator with id equal to operatorId exists.
  • Parameters:
    • operatorId

• setOperatorData(operatorId, operatorData):

  • Description: This method replaces the operator's data. Note that if new connectors are renamed / removed, the flowchart can remove links.
  • Parameters:
    • operatorId
    • operatorData: Same as in data.operators.

• getOperatorData(operatorId):

  • Parameters:
    • operatorId
  • Return: The operator's data. Same as in data.operators.

• getConnectorPosition(operatorId, connectorId):

  • Parameters:
    • operatorId
    • connectorId
  • Return: The connector's position relative to the container.

• getOperatorCompleteData(operatorData):

  • Parameters:
    • operatorData: The operator's data. Same as in data.operators.
  • Return: Completes the operator's data with default values if some keys are not defined (like class for instance).

• getOperatorElement(operatorData):

  • Parameters:
    • operatorData: The operator's data. Same as in data.operators.
  • Return: The operator's DOM element (jquery). The element is not added in the container. It can be used to preview the operator or showing it during a drag and drop operation.

• getLinksFrom(operatorId):

  • Parameters:
    • operatorId: The operator's Id.
  • Return: Array with all links from the provided operator.

• getLinksTo(operatorId):

  • Parameters:
    • operatorId: The operator's Id.
  • Return: Array with all links to the provided operator.

• getOperatorFullProperties(operatorData):

  • Parameters:
    • operatorData: The operator's data. Same as in data.operators.
  • Return: If not operator type is defined, the property key. Otherwise, the property key extended with the operator's type properties.

Links:

• createLink(linkId, linkData):

  • Parameters:
    • linkId
    • linkData: Same as in data.links.

• addLink(linkData):

  • Description: Same as createLinks, but automatically sets the link's ID.
  • Parameters:
    • linkData: Same as in data.links.
  • Return: The link's ID.

• deleteLink(linkId):

  • Parameters:
    • linkId

• getSelectedLinkId():

  • Return: The link ID if one is selected, null otherwise.

• selectLink(linkId):

  • Parameters:
    • linkId

• unselectLink()

• setLinkMainColor(linkId, color):

  • Parameters:
    • linkId
    • color

• getLinkMainColor(linkId):

  • Parameters:
    • linkId
  • Returns: The link's color.

• colorizeLink(linkId, color):

  • Description: Sets the link a temporary color contrary to setLinkMainColor. It can be used to temporarly highlight a link for instance.
  • Parameters:
    • linkId
    • color

• uncolorizeLink(linkId):

  • Description: Sets the link color back to its main color.
  • Parameters:
    • linkId

• redrawLinksLayer():

  • Description: Redraws all the links.

Misc:

• getData():

  • Return: The flow chart's data. Same structure as the data option.

• setData(data):

  • Parameters:
    • data: Same structure as the data option.

• getDataRef():

  • Return: The internal system flow chart's data.

• setPositionRatio(positionRatio):

  • Parameters:
    • positionRatio: The ratio between the mouse position and the position of the DOM elements. Used when drag and dropping the operators. You should use it if you zoom the container. See the advanced demo.

• getPositionRatio():

  • Return: The position ratio.

• deleteSelected():

  • Description: Deletes the link or operator selected.

jquery.flowchart's Issues

Adding a Custom Class

I am trying to add a custom CSS class to an operator, however the default style is still being set.

left: obj[i].X, top: obj[i].Y, properties: {
                    class: 'flowchart-operator-action',
                    title: obj[i].DisplayName,
                    inputs: {
                        input_1: {
                            label: 'Input',
                        }
                    },
                    outputs: {
                        output_1: {
                            label: 'Output',
                        }
                    }
                }

panzoom and mousewheel

I pulled the panzoom and mousewheel from your advanced example. I'm using jquery 3.1.1. I include jquery and jquery.ui and then in this order the other files:

<script src="~/Scripts/jquery.panzoom.min.js"></script>
<script src="~/Scripts/jquery.mousewheel.min.js"></script>
<script src="~/Scripts/jquery.flowchart.js"></script>

but I'm getting an error:

jquery.panzoom.min.js:83 Uncaught TypeError: Cannot read property 'concat' of undefined
at http://localhost:63145/Scripts/jquery.panzoom.min.js:83:20
at http://localhost:63145/Scripts/jquery.panzoom.min.js:11:158
at http://localhost:63145/Scripts/jquery.panzoom.min.js:12:2

For now I commented out the javascript usage of the panzoom so just including the panzoom library causes this error.

Is there any way to associate some metadata to Operator?

I want to associate some metadata ( some key value pairs ) to each Operator, is there any possibility right now?

Straight links

Is it possible to draw the links as straight lines instead of the curved ones? I couldn't find a suitable parameter.

Delete within container or link

Hello Sébastien!!!
Thank you very much for such a great plugin!!!
I would like to ask is it possible at the moment to place DELETE button somewhere within container element and link on selection?

Best regards!!!
Cheers!

Need to detect duplicate links

This plugin does not detect duplicate links when multipleLinks is enabled.

Panzoom and setTransform()

I would like to save the current state of the flowchart's panzoom using panzoom's getTransform() function and then when the flowchart is reloaded, have it remember and display the flowchart as it was last seen. It almost works.

It DOES work properly when you load it as read-only (with canUserEditLinks: false, canUserMoveOperators: false).

BUT if you load a flowchart and THEN use panzoom's setTransform() function, and then try to drag any operators, all of the links go haywire.

One weird artifact I found was that if the user uses the mousewheel scroll before dragging any operators, it all works. But of course, we can't assume the user will know to do that. I even tried to use jQuery to simulate a mouse scroll, and it didn't work.

I tried everything I could, but this appears to be a bug within jquery.flowchart. The link elements are not being updated somehow.

Flowchart add way to much subconnectors

Hey,

Something strange is happening:

My input data looks like this:

{ "operators":{ "89":{ "top":"4880", "left":"4460", "properties":{ "title":"1 input & 1 output", "inputs":{ "ins":{ "label":"Input (:i)", "multiple":true } }, "outputs":{ "outs":{ "label":"Output (:i)", "multiple":true } } } }, "90":{ "top":"4777.5", "left":"5006.5", "properties":{ "title":"1 input & 1 output", "inputs":{ "ins":{ "label":"Input (:i)", "multiple":true } }, "outputs":{ "outs":{ "label":"Output (:i)", "multiple":true } } } }, "91":{ "top":"4901.5", "left":"5387.5", "properties":{ "title":"1 input & 1 output", "inputs":{ "ins":{ "label":"Input (:i)", "multiple":true } }, "outputs":{ "outs":{ "label":"Output (:i)", "multiple":true } } } }, "92":{ "top":"5060", "left":"5020", "properties":{ "title":"1 input & 1 output", "inputs":{ "ins":{ "label":"Input (:i)", "multiple":true } }, "outputs":{ "outs":{ "label":"Output (:i)", "multiple":true } } } } }, "links":[ { "fromOperator":"89", "fromConnector":"outs", "fromSubConnector":"0", "toOperator":"90", "toConnector":"ins", "toSubConnector":"0", "custom_link_id":"0" }, { "fromOperator":"89", "fromConnector":"outs", "fromSubConnector":"1", "toOperator":"91", "toConnector":"ins", "toSubConnector":"0", "custom_link_id":"1" }, { "fromOperator":"89", "fromConnector":"outs", "fromSubConnector":"2", "toOperator":"92", "toConnector":"ins", "toSubConnector":"0", "custom_link_id":"2" }, { "fromOperator":"92", "fromConnector":"outs", "fromSubConnector":"0", "toOperator":"91", "toConnector":"ins", "toSubConnector":"1", "custom_link_id":"3" } ] }

Do you have any idea why this happens?

Thank you in advance:)

'.flowchart-link' don't work

I use this plugin in my project which is based on react.All things work well except events of links.I use 'g g' replace '.flowchart-link' to make this plugin work again.But I don't know the reason.

the Plugin is not working in IE11 windows7

This Plug in is working fine with all the the browsers except IE 11 in Windows 7. Is there is any compatibility issues with this plug in. Plz suggest/help.

Possible to put input on top and output on bottom?

Hello,

Is it possible to create a vertical layout with inputs on top and outputs on the bottom (now it's left and right).

Thank you in advance!

Angular version

Is there somebody how prepares AngularJS adaptation for jquery.flowchart plugin?

Thank You

nextOperator / prevOperator

I suggest adding two methods. I think it will be necessary to tour the operator.

        nextOperator: function(operatorId) {
            for (var linkId in this.data.links) {
                if (this.data.links.hasOwnProperty(linkId)) {
                    var currentLink = this.data.links[linkId];
                    if (currentLink.fromOperator == operatorId) {
                        return currentLink.toOperator;
                    }
                }
            }
            return "";
        },

        prevOperator: function(operatorId) {
            for (var linkId in this.data.links) {
                if (this.data.links.hasOwnProperty(linkId)) {
                    var currentLink = this.data.links[linkId];
                    if (currentLink.toOperator == operatorId) {
                        return currentLink.fromOperator;
                    }
                }
            }
            return "";
        },

Thank you for making awesome plugin.

jquery.flowchart-Links not loading while binding-in Modal popup

We are not able load the already saved flow chart links in modal Pop ups. We could only able to load the operators not the links in modal.

While retrieving flow chart in modal popup we are getting links position value as Zero in our code.

Kindly help to rectify the same.

Save Flow Chart, Icon Integration, Properties

Hi! First of all, really nice work! It's such an amazing tool.

I'm having some trouble saving the flowchart or exporting the flowchart, a working demo or some example would be very useful.

Can i link a audio file, for example, to a operator (like it was his propertie)?

Another suggestion would be making it appliable to icons maybe.

setOperatorData on operators with ins/outs set to multiple:true

When you have an operator with multiple: true on it's ins and/or outs, the additional input/output labels disappear when you call setOperatorData.

Example code:

// operator has 1 output with link and, thanks to multiple: true, 1 free output label
var operatorData = flowChartElement.flowchart('getOperatorData', currentOperatorId);
operatorData.properties.options[0].value = false; // setting some data attribute
flowChartElement.flowchart('setOperatorData', currentOperatorId, operatorData);
// operator now has 1 output with link, still multiple: true on it's outs, but no free output label

Error when delete operator on Safari 6.0.5

TypeError: 'undefined' is not a function (evaluating 'linkData.internal.els.overallGroup.remove()')

at jquery.chart.js ：８９３,

can anybody help please ?

Pull request for the touchmove event

Handle PR from Todd Wade [email protected]

jquery.flowchart-pull-request-2.txt

using operatorTypes and failing createLink call on _autoCreateSubConnector

when linking 2 operators that were defined from operatorTypes, the call to this._autoCreateSubConnector causes an error on line 256 because the outputs and inputs properties defined in operatorTypes are set on this.data.operators[operator].internal.properties, not this.data.operators[operator].properties.

im not sure if the fix for this is a check to see if either are defined and set connectorInfos accordingly, or if im missing somewhere that should be pushing the operatorTypes properties back out of internal during the call to createLink.

any ideas?

Is it possible to move the inputs and outputs at top and bottom?

Output to multiple operator inputs

A valid use case is where the output of one operator may feed the input of more than one operators input.

Currently if I have the output connected to the input of another operator(1), I can't connect that same output to the input of operator(2).

You may add additional outputs to accomplish this, but it presents the dilemma of having to know how many other operators you're going to connect to before hand.

The simple solution is to just draw links to as many inputs as the user requires.

Question: Is this possible?

Internet Explorer compatibility?

Thanks for a great plugin! 👍

Any news on the IE compatibility? Most thing seems to work, but I cant select operators.

Thanks,

Overwrite multipleLinksOnInput and multipleLinksOnOutput properties of the default options.

On createLink method, multipleLinksOnOutput and multipleLinksOnInput properties are obtained only from the default options.

after line 211, include this code to obtain (if exists) the multipleLinksOnOutput property of the fromOperator and the multipleLinksOnInput property of the toOperator.

In this way, each operator may overwrite the default properties.

if (typeof this.getOperatorData(linkDataOriginal.fromOperator).multipleLinksOnOutput !== "undefined")
                multipleLinksOnOutput = this.getOperatorData(linkDataOriginal.fromOperator).multipleLinksOnOutput;

if (typeof this.getOperatorData(linkDataOriginal.toOperator).multipleLinksOnInput !== "undefined")
                multipleLinksOnInput = this.getOperatorData(linkDataOriginal.toOperator).multipleLinksOnInput;

congratulations for the work!

Bad colors on stroke when color is word-defined

Hi,

I noticed a small bug when you define colors as words ('red', 'blue').
It's due to the function _shadeColor that only take hexa values.

Regards

Question: Drag outside of scrollable div

First great stuff, using it to show database dependencies. The client is like WOW.

I'm using jquery.jspanel (jspanel.de) to hold div's of the table and fields. When I click and drag, it works fine to drop it onto the chart_container, however it scrolls inside the panel, and not visible until dropped on the chart_container. All works well after that as far as dragging, etc. I'd prefer it to be visible while moving outside of that panel. I've tried changing the z-index, but that didn't work.

I'm using your draggable and getOperatorData from the demo to create the operator.

Any suggestions?

Thanks in advance
-Mike

Programmatically change operator position

Is there a way to change the operator position programmatically?

Error on dragging with latest Chrome version (Advanced Panzoom example)

Hi,

The advanced example with Panzoom is not working on the latest version of Chrome. Objects are not being dragged individually.

All other examples work normally on http://sebastien.drouyer.com/jquery.flowchart-demo. The problem occurs only in "Advanced: panzoom view and operator creation using drag and drop".

It works normally in FireFox and earlier versions of Chrome, but does not work on the latest Chrome update (Version Version 55.0.2883.87).

Thanks if you can check.

Duplicate variable and suspicious effects

In line 583 there's a declared variable that have the same name of the variable in the function arguments at line 558, after, this variable is used in function operatorChangedPosition.
This declaration is useless and can be removed or the variable have to be renamed?

Labels over links

Hi!
Is it possible to add labels over links? If yes please tell me how can I make this.

Possible to embed media in operator?

Is it possible to embed media/custom html inside an operator div? In particular I'm trying to embed a audio clip (via https://soundcite.knightlab.com/) into a flowchart node. I invite hacky workarounds or other libraries/products if you know of them.

I know this isn't exactly a primary use case so I understand if the answer is no and this isn't a viable feature request. Thanks!

Swapping input and output locations and Background images/colors

I was wondering if there was a way to swap the input and output locations, not just changing the name, but allowing the left side to act as the output and right side as the input.
Also
Is there a way to change the background of the nodes? By replacing it as colors or images?
Thank you

Conflict with ionic

Cannot select operator, and cannot select link, cannot create link, when using ionic library in AngularJS.

Limit draggable area (to div itself and/or to custom element)

I'm able to move operators out of flowchart div. I know operators are draggable and they're containable. Are you planning any support on this?

Is there a way to change Input names similar to getOperatorTitle function?

I was using your plugin, so far so good. until i came across the getOperatorTitle function. it would be a really big help if you would help me get in track in your plugin on how can i rename the input inside the operator UI wise.

Adding a node via clicking

You have a drag and drop example of placing a node but that has some kind of ui parameter. Is there any way you could show how to add nodes with the default click event (where the 'e' parameter is passed into the event handler). I can't seem to get the positioning correct.

windows 8 and ie11

im on windows 8
in firefox every thing working good
but in ie [9,11] the plugin have a lots of issuse and dont work
is there a patch for ie!?

Keypress events

Hi there,
Is there any way for me to bind to a keypress event on a link?
I want to be able to delete a link by selecting it, then hitting the delete key. As of yet, I've not seen a way I can achieve this.

Any help is appreciated,
Ryan

change color each item inputs and match color also same with input

setData causing error with links

When I try to run setData(), I am getting this error if there are existing links with the same name in the existing flowchart.

this.data.operators[t] is undefined

is possible to put the operator beforehand with php?

Text on Links

Really great tool. Makes process flow diagrams really easy and makes the saving of operator/link data really simple.

Is there any way I can currently put text on links? Have I missed something? If not, is it something you are planning on adding?

Thanks. And again, great tool.

Andrew.

Link is missing when i reload data from any storage.

I loaded data into db after creating the chart. while reloading data using setData() i got all operators but not links.

Circle as operator in the flow chart

Is there any way to use circle as operator through the library similar like rectangle and establish links between rectangle and circle?

Operador drag problem

Hello Sebastien!!
I faced one more issue. Usage with panzoom disables operators to drag. It seems like its only paning but operator remains at the same place

auto arange

is there any config to auto arange all operator?

Operators are getting duplicate names?

Hey there.

When adding new operators by dragging them into the chart, they don't seem to consider which operators are already present. So, if I make a blank chart and add three operators, these are called op_0, op_1 and op_2.

But if I save the data and load it again, the names of the new operators are once again starting from 0 even though this already exists, which makes some weird behaviour. The same happens if I'm starting out with operators name op_0 and op_1.

How can I make new operators consider the already existing ones?

bug fix

in draggable sample in stop section change

var operatorId = 0;
.
.
.
operatorId++;

to
operatorId = Object.keys($('#example_9').flowchart('getData').operators).length-2;

How to use this plugin with React js ?

I want to use this plugin in react. When I include it in react using script tags, I don't see anything although the operators get loaded but does not displayed.
If I use npm package for it, it does not work and shows errors.
Please tell us step by step how to implement it in React.

How to use it in Tomcat + JSP?

Dear sdrdis,

I'm using Tomcat as server and using Eclipse to compile a JSP with the hope to display your flow chart in any browser (currently I am using Chrome and Edge).

I've written the following example with after downloading your js files.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script src="../js/panzoom.js"></script> <script src="../js/jquery.mousewheel.min.js"></script> <script src="../js/jquery.flowchart.js"></script> <title>My First Process Flowchart</title> <script type="text/javascript"> $(document).ready(function() { var data = { operators: { operator1: { top: 20, left: 20, properties: { title: 'Operator 1', inputs: {}, outputs: { output_1: { label: 'Output 1', } } } }, operator2: { top: 80, left: 300, properties: { title: 'Operator 2', inputs: { input_1: { label: 'Input 1', }, input_2: { label: 'Input 2', }, }, outputs: {} } }, }, links: { link_1: { fromOperator: 'operator1', fromConnector: 'output_1', toOperator: 'operator2', toConnector: 'input_2', }, } }; // Apply the plugin on a standard, empty div... $('#example_3').flowchart({ data: data }); }); </script>

Funny Test

---

However, I simply could Not display the box (div), where the operators & links should be inside.
Could you pls advise where goes wrong?

Many thanks!
Schumann

Minimap integration

Hello,

Very effective and nice plugin. Is there any provision to use Jquery Minimap with flowchart. It would be very useful.