Repository: sdrdis/jquery.flowchart
Branch: master
Commit: d66c7cfdb089
Files: 7
Total size: 81.6 KB
Directory structure:
gitextract_m5zdubwc/
├── MIT-LICENSE.txt
├── README.md
├── demo.html
├── flowchart.jquery.json
├── jquery.flowchart.css
├── jquery.flowchart.js
└── package.json
================================================
FILE CONTENTS
================================================
================================================
FILE: MIT-LICENSE.txt
================================================
Copyright 2016 Sebastien Drouyer
https://github.com/sdrdis/jquery.flowchart
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: README.md
================================================
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](http://sebastien.drouyer.com/jquery.flowchart-demo/#advanced).
Context
-------
This project is part of a bigger one, [UltIDE](https://github.com/ultide/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](https://github.com/sdrdis/jquery.flowchart/blob/master/MIT-LICENSE.txt).
Authors
-------
* [Sebastien Drouyer](http://sebastien.drouyer.com) - alias [@sdrdis](https://twitter.com/sdrdis) - for this jquery ui plugin
Contributors
------------
* Simone Gasparini - alias [@simmyg89](https://github.com/simmyg89) - for bug fixes and code formatting.
* Guijin Ding - alias [@dingguijin](https://github.com/dingguijin) - for bug fixes.
* M. Fatih Marabaoğlu - alias [@MFatihMAR](https://github.com/MFatihMAR) - for adding the uncontained parameter and improving the grid system.
* Peter Vavro - alias [@petervavro](https://github.com/petervavro) - for adding mouse events.
* Mike Branham - alias [@Mike-Branham](https://github.com/Mike-Branham) - for bug fixes in the demo page.
* [@zhangbg](https://github.com/zhangbg) - for compatibility with IE9, IE10 and IE11.
* [@elvaron](https://github.com/elvaron) - for bug fixes and adding the getLinksFrom and getLinksTo methods.
* Ziyi Wang - alias [@ziyiwang](https://github.com/ziyiwang) - for bug fixes.
* [@dogbull](https://github.com/dogbull) - for adding the getDataRef method.
* Yaroslav Zenin - alias [@yaroslav-zenin](https://github.com/yaroslav-zenin) - for big fixes.
* [@lflfm](https://github.com/lflfm) - for bug fixes and new demo page.
* [@neoera](https://github.com/neoera) - for adding multiple sub connector with array support.
* Dima Shemendiuk - alias [@dshemendiuk](https://github.com/dshemendiuk) - for adding vertical flowchart support and access to operators's body.
* Ernani Azevedo - alias [@ernaniaz](https://github.com/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 `multipleLinksOnInput`of `multipleLinksOnOutput`are 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](http://sebastien.drouyer.com/jquery.flowchart-demo/#multiple).
* __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](http://sebastien.drouyer.com/jquery.flowchart-demo/#advanced).
* __getPositionRatio():__
* __Return:__ The position ratio.
* __deleteSelected():__
* __Description:__ Deletes the link or operator selected.
================================================
FILE: demo.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery & jQuery UI are required -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Flowchart CSS and JS -->
<link rel="stylesheet" href="jquery.flowchart.css">
<script src="jquery.flowchart.js"></script>
<style>
.flowchart-example-container {
width: 800px;
height: 400px;
background: white;
border: 1px solid #BBB;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Semi-minimalist usage sample</h1>
<h4>Sample created with basis on some from Sebastien Drouyer, original author's <a href="https://sebastien.drouyer.com/jquery.flowchart-demo/">website</a>.</h4>
<h4>Flowchart</h4>
<div id="chart_container">
<div class="flowchart-example-container" id="flowchartworkspace"></div>
</div>
<div class="draggable_operators">
<div class="draggable_operators_label">
Operators (drag and drop them in the flowchart):
</div>
<div class="draggable_operators_divs">
<div class="draggable_operator" data-nb-inputs="1" data-nb-outputs="0">1 input</div>
<div class="draggable_operator" data-nb-inputs="0" data-nb-outputs="1">1 output</div>
<div class="draggable_operator" data-nb-inputs="1" data-nb-outputs="1">1 input & 1 output</div>
<div class="draggable_operator" data-nb-inputs="1" data-nb-outputs="2">1 in & 2 out</div>
<div class="draggable_operator" data-nb-inputs="2" data-nb-outputs="1">2 in & 1 out</div>
<div class="draggable_operator" data-nb-inputs="2" data-nb-outputs="2">2 in & 2 out</div>
</div>
</div>
<button class="create_operator">Create operator</button>
<button class="delete_selected_button">Delete selected operator / link</button>
<div id="operator_properties" style="display: block;">
<label for="operator_title">Operator's title: </label><input id="operator_title" type="text">
</div>
<div id="link_properties" style="display: block;">
<label for="link_color">Link's color: </label><input id="link_color" type="color">
</div>
<button class="get_data" id="get_data">Get data</button>
<button class="set_data" id="set_data">Set data</button>
<button id="save_local">Save to local storage</button>
<button id="load_local">Load from local storage</button>
<div>
<textarea id="flowchart_data"></textarea>
</div>
<script type="text/javascript">
/* global $ */
$(document).ready(function() {
var $flowchart = $('#flowchartworkspace');
var $container = $flowchart.parent();
// Apply the plugin on a standard, empty div...
$flowchart.flowchart({
data: defaultFlowchartData,
defaultSelectedLinkColor: '#000055',
grid: 10,
multipleLinksOnInput: true,
multipleLinksOnOutput: true
});
function getOperatorData($element) {
var nbInputs = parseInt($element.data('nb-inputs'), 10);
var nbOutputs = parseInt($element.data('nb-outputs'), 10);
var data = {
properties: {
title: $element.text(),
inputs: {},
outputs: {}
}
};
var i = 0;
for (i = 0; i < nbInputs; i++) {
data.properties.inputs['input_' + i] = {
label: 'Input ' + (i + 1)
};
}
for (i = 0; i < nbOutputs; i++) {
data.properties.outputs['output_' + i] = {
label: 'Output ' + (i + 1)
};
}
return data;
}
//-----------------------------------------
//--- operator and link properties
//--- start
var $operatorProperties = $('#operator_properties');
$operatorProperties.hide();
var $linkProperties = $('#link_properties');
$linkProperties.hide();
var $operatorTitle = $('#operator_title');
var $linkColor = $('#link_color');
$flowchart.flowchart({
onOperatorSelect: function(operatorId) {
$operatorProperties.show();
$operatorTitle.val($flowchart.flowchart('getOperatorTitle', operatorId));
return true;
},
onOperatorUnselect: function() {
$operatorProperties.hide();
return true;
},
onLinkSelect: function(linkId) {
$linkProperties.show();
$linkColor.val($flowchart.flowchart('getLinkMainColor', linkId));
return true;
},
onLinkUnselect: function() {
$linkProperties.hide();
return true;
}
});
$operatorTitle.keyup(function() {
var selectedOperatorId = $flowchart.flowchart('getSelectedOperatorId');
if (selectedOperatorId != null) {
$flowchart.flowchart('setOperatorTitle', selectedOperatorId, $operatorTitle.val());
}
});
$linkColor.change(function() {
var selectedLinkId = $flowchart.flowchart('getSelectedLinkId');
if (selectedLinkId != null) {
$flowchart.flowchart('setLinkMainColor', selectedLinkId, $linkColor.val());
}
});
//--- end
//--- operator and link properties
//-----------------------------------------
//-----------------------------------------
//--- delete operator / link button
//--- start
$flowchart.parent().siblings('.delete_selected_button').click(function() {
$flowchart.flowchart('deleteSelected');
});
//--- end
//--- delete operator / link button
//-----------------------------------------
//-----------------------------------------
//--- create operator button
//--- start
var operatorI = 0;
$flowchart.parent().siblings('.create_operator').click(function() {
var operatorId = 'created_operator_' + operatorI;
var operatorData = {
top: ($flowchart.height() / 2) - 30,
left: ($flowchart.width() / 2) - 100 + (operatorI * 10),
properties: {
title: 'Operator ' + (operatorI + 3),
inputs: {
input_1: {
label: 'Input 1',
}
},
outputs: {
output_1: {
label: 'Output 1',
}
}
}
};
operatorI++;
$flowchart.flowchart('createOperator', operatorId, operatorData);
});
//--- end
//--- create operator button
//-----------------------------------------
//-----------------------------------------
//--- draggable operators
//--- start
//var operatorId = 0;
var $draggableOperators = $('.draggable_operator');
$draggableOperators.draggable({
cursor: "move",
opacity: 0.7,
// helper: 'clone',
appendTo: 'body',
zIndex: 1000,
helper: function(e) {
var $this = $(this);
var data = getOperatorData($this);
return $flowchart.flowchart('getOperatorElement', data);
},
stop: function(e, ui) {
var $this = $(this);
var elOffset = ui.offset;
var containerOffset = $container.offset();
if (elOffset.left > containerOffset.left &&
elOffset.top > containerOffset.top &&
elOffset.left < containerOffset.left + $container.width() &&
elOffset.top < containerOffset.top + $container.height()) {
var flowchartOffset = $flowchart.offset();
var relativeLeft = elOffset.left - flowchartOffset.left;
var relativeTop = elOffset.top - flowchartOffset.top;
var positionRatio = $flowchart.flowchart('getPositionRatio');
relativeLeft /= positionRatio;
relativeTop /= positionRatio;
var data = getOperatorData($this);
data.left = relativeLeft;
data.top = relativeTop;
$flowchart.flowchart('addOperator', data);
}
}
});
//--- end
//--- draggable operators
//-----------------------------------------
//-----------------------------------------
//--- save and load
//--- start
function Flow2Text() {
var data = $flowchart.flowchart('getData');
$('#flowchart_data').val(JSON.stringify(data, null, 2));
}
$('#get_data').click(Flow2Text);
function Text2Flow() {
var data = JSON.parse($('#flowchart_data').val());
$flowchart.flowchart('setData', data);
}
$('#set_data').click(Text2Flow);
/*global localStorage*/
function SaveToLocalStorage() {
if (typeof localStorage !== 'object') {
alert('local storage not available');
return;
}
Flow2Text();
localStorage.setItem("stgLocalFlowChart", $('#flowchart_data').val());
}
$('#save_local').click(SaveToLocalStorage);
function LoadFromLocalStorage() {
if (typeof localStorage !== 'object') {
alert('local storage not available');
return;
}
var s = localStorage.getItem("stgLocalFlowChart");
if (s != null) {
$('#flowchart_data').val(s);
Text2Flow();
}
else {
alert('local storage empty');
}
}
$('#load_local').click(LoadFromLocalStorage);
//--- end
//--- save and load
//-----------------------------------------
});
var defaultFlowchartData = {
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',
},
}
};
if (false) console.log('remove lint unused warning', defaultFlowchartData);
</script>
</body>
</html>
================================================
FILE: flowchart.jquery.json
================================================
{
"name": "jquery.flowchart",
"description": "JQuery UI plugin that allows you to draw a flow chart.",
"version": "1.0.0",
"licenses": [
{
"type": "MIT",
"url": "https://github.com/sdrdis/jquery.flowchart/blob/master/MIT-LICENSE.txt"
}
],
"title": "Flowchart",
"keywords": [
"flowchart",
"flow",
"chart",
"graph",
"ui"
],
"author": {
"url": "http://sebastien.drouyer.com",
"name": "Sébastien Drouyer"
},
"maintainers": [
{
"name": "Sébastien Drouyer",
"url": "http://sebastien.drouyer.com"
}
],
"download": "https://github.com/sdrdis/jquery.flowchart/releases",
"homepage": "http://sebastien.drouyer.com/jquery.flowchart-demo/",
"demo": "http://sebastien.drouyer.com/jquery.flowchart-demo/",
"docs": "https://github.com/sdrdis/jquery.flowchart/",
"bugs": "https://github.com/sdrdis/jquery.flowchart/issues",
"dependencies": {
"jquery": ">=1.10",
"jquery-ui": ">=1.11"
}
}
================================================
FILE: jquery.flowchart.css
================================================
/*
* jquery.flowchart - CSS definitions
*/
.flowchart-container {
position: relative;
overflow: hidden;
}
.flowchart-links-layer, .flowchart-operators-layer, .flowchart-temporary-link-layer {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.flowchart-operators-layer, .flowchart-temporary-link-layer {
pointer-events: none;
}
.flowchart-temporary-link-layer {
display: none;
}
.flowchart-link, .flowchart-operator {
cursor: default;
}
.flowchart-operator-connector {
position: relative;
padding-top: 5px;
padding-bottom: 5px;
}
.flowchart-operator-connector-label {
font-size: small;
}
.flowchart-operator-inputs .flowchart-operator-connector-label {
margin-left: 14px;
}
.flowchart-operator-outputs .flowchart-operator-connector-label {
text-align: right;
margin-right: 5px;
}
.flowchart-operator-connector-arrow {
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid rgb(204, 204, 204);
position: absolute;
top: 0px;
}
.flowchart-operator-connector-small-arrow {
width: 0px;
height: 0px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent; /*rgb(100, 100, 100);*/
position: absolute;
top: 5px;
pointer-events: none;
}
.flowchart-operator-connector:hover .flowchart-operator-connector-arrow {
border-left: 10px solid rgb(153, 153, 153);
}
.flowchart-operator-inputs .flowchart-operator-connector-arrow {
left: -1px;
}
.flowchart-operator-outputs .flowchart-operator-connector-arrow {
right: -10px;
}
.flowchart-operator-inputs .flowchart-operator-connector-small-arrow {
left: -1px;
}
.flowchart-operator-outputs .flowchart-operator-connector-small-arrow {
right: -7px;
}
.unselectable {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
/* Default Operator */
.flowchart-operator {
position: absolute;
width: 140px;
border: 1px solid #CCCCCC;
background: #FAFAFA;
pointer-events: auto;
}
.flowchart-operator.hover {
border-color: #999;
}
.flowchart-operator.selected {
border-color: #555;
}
.flowchart-operator .flowchart-operator-title {
width: 100%;
padding: 5px;
font-weight: bold;
box-sizing: border-box;
border-bottom: 1px solid #DDDDDD;
background: #F0F0F0;
height: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: move;
}
.flowchart-operator .flowchart-operator-inputs-outputs {
display: table;
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
}
.flowchart-operator .flowchart-operator-inputs, .flowchart-default-operator .flowchart-operator-outputs {
display: table-cell;
width: 50%;
}
/*
* flowchart-vertical
*/
.flowchart-vertical .flowchart-operator-inputs,
.flowchart-vertical .flowchart-operator-outputs {
position: relative;
text-align: center;
display: table;
width: 100%;
}
.flowchart-vertical .flowchart-operator-connector-set {
display: table-cell;
}
.flowchart-vertical .flowchart-operator-connector {
position: relative;
}
.flowchart-vertical .flowchart-operator-connector-label {
position: relative;
text-align: center;
width: 100%;
}
.flowchart-vertical .flowchart-operator-inputs .flowchart-operator-connector-label {
margin-left: auto;
}
.flowchart-vertical .flowchart-operator-connector-arrow {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #ccc;
left: calc(50% - 10px);
}
.flowchart-vertical .flowchart-operator-connector:hover .flowchart-operator-connector-arrow {
border-left-color: transparent;
border-top-color: #999;
}
.flowchart-vertical .flowchart-operator-connector-small-arrow {
border-right: 5px solid transparent;
top: 2px;
left: calc(50% - 5px);
}
.flowchart-vertical .flowchart-operator-connector-arrow {
top: 0px;
}
.flowchart-vertical .flowchart-operator-outputs .flowchart-operator-connector-arrow {
bottom: -20px;
top: auto;
}
.flowchart-vertical .flowchart-operator-outputs .flowchart-operator-connector-small-arrow {
left: calc(50% - 5px);
bottom: -12px;
top: auto;
}
.flowchart-vertical .flowchart-link rect {
display: none;
}
/*
* flowchart-operator-body
*/
.flowchart-operator-body {
padding: 5px;
cursor: move;
}
================================================
FILE: jquery.flowchart.js
================================================
if (!('remove' in Element.prototype)) {
Element.prototype.remove = function() {
if (this.parentNode) {
alert(this.innerHTML);
this.parentNode.removeChild(this);
}
};
}
jQuery(function ($) {
// the widget definition, where "custom" is the namespace,
// "colorize" the widget name
$.widget("flowchart.flowchart", {
// default options
options: {
canUserEditLinks: true,
canUserMoveOperators: true,
data: {},
distanceFromArrow: 3,
defaultOperatorClass: 'flowchart-default-operator',
defaultLinkColor: '#3366ff',
defaultSelectedLinkColor: 'black',
linkWidth: 10,
grid: 20,
multipleLinksOnOutput: false,
multipleLinksOnInput: false,
linkVerticalDecal: 0,
verticalConnection: false,
onOperatorSelect: function (operatorId) {
return true;
},
onOperatorUnselect: function () {
return true;
},
onOperatorMouseOver: function (operatorId) {
return true;
},
onOperatorMouseOut: function (operatorId) {
return true;
},
onLinkSelect: function (linkId) {
return true;
},
onLinkUnselect: function () {
return true;
},
onOperatorCreate: function (operatorId, operatorData, fullElement) {
return true;
},
onLinkCreate: function (linkId, linkData) {
return true;
},
onOperatorDelete: function (operatorId) {
return true;
},
onLinkDelete: function (linkId, forced) {
return true;
},
onOperatorMoved: function (operatorId, position) {
},
onAfterChange: function (changeType) {
}
},
data: null,
objs: null,
maskNum: 0,
linkNum: 0,
operatorNum: 0,
lastOutputConnectorClicked: null,
selectedOperatorId: null,
selectedLinkId: null,
positionRatio: 1,
globalId: null,
// the constructor
_create: function () {
if (typeof document.__flowchartNumber == 'undefined') {
document.__flowchartNumber = 0;
} else {
document.__flowchartNumber++;
}
this.globalId = document.__flowchartNumber;
this._unitVariables();
this.element.addClass('flowchart-container');
if (this.options.verticalConnection) {
this.element.addClass('flowchart-vertical');
}
this.objs.layers.links = $('<svg class="flowchart-links-layer"></svg>');
this.objs.layers.links.appendTo(this.element);
this.objs.layers.operators = $('<div class="flowchart-operators-layer unselectable"></div>');
this.objs.layers.operators.appendTo(this.element);
this.objs.layers.temporaryLink = $('<svg class="flowchart-temporary-link-layer"></svg>');
this.objs.layers.temporaryLink.appendTo(this.element);
var shape = document.createElementNS("http://www.w3.org/2000/svg", "line");
shape.setAttribute("x1", "0");
shape.setAttribute("y1", "0");
shape.setAttribute("x2", "0");
shape.setAttribute("y2", "0");
shape.setAttribute("stroke-dasharray", "6,6");
shape.setAttribute("stroke-width", "4");
shape.setAttribute("stroke", "black");
shape.setAttribute("fill", "none");
this.objs.layers.temporaryLink[0].appendChild(shape);
this.objs.temporaryLink = shape;
this._initEvents();
if (typeof this.options.data != 'undefined') {
this.setData(this.options.data);
}
},
_unitVariables: function () {
this.data = {
operators: {},
links: {}
};
this.objs = {
layers: {
operators: null,
temporaryLink: null,
links: null
},
linksContext: null,
temporaryLink: null
};
},
_initEvents: function () {
var self = this;
this.element.mousemove(function (e) {
var $this = $(this);
var offset = $this.offset();
self._mousemove((e.pageX - offset.left) / self.positionRatio, (e.pageY - offset.top) / self.positionRatio, e);
});
this.element.click(function (e) {
var $this = $(this);
var offset = $this.offset();
self._click((e.pageX - offset.left) / self.positionRatio, (e.pageY - offset.top) / self.positionRatio, e);
});
this.objs.layers.operators.on('pointerdown mousedown touchstart', '.flowchart-operator', function (e) {
e.stopImmediatePropagation();
});
this.objs.layers.operators.on('click', '.flowchart-operator', function (e) {
if ($(e.target).closest('.flowchart-operator-connector').length == 0) {
self.selectOperator($(this).data('operator_id'));
}
});
this.objs.layers.operators.on('click', '.flowchart-operator-connector', function () {
var $this = $(this);
if (self.options.canUserEditLinks) {
self._connectorClicked($this.closest('.flowchart-operator').data('operator_id'), $this.data('connector'), $this.data('sub_connector'), $this.closest('.flowchart-operator-connector-set').data('connector_type'));
}
});
this.objs.layers.links.on('mousedown touchstart', '.flowchart-link', function (e) {
e.stopImmediatePropagation();
});
this.objs.layers.links.on('mouseover', '.flowchart-link', function () {
self._connecterMouseOver($(this).data('link_id'));
});
this.objs.layers.links.on('mouseout', '.flowchart-link', function () {
self._connecterMouseOut($(this).data('link_id'));
});
this.objs.layers.links.on('click', '.flowchart-link', function () {
self.selectLink($(this).data('link_id'));
});
this.objs.layers.operators.on('mouseover', '.flowchart-operator', function (e) {
self._operatorMouseOver($(this).data('operator_id'));
});
this.objs.layers.operators.on('mouseout', '.flowchart-operator', function (e) {
self._operatorMouseOut($(this).data('operator_id'));
});
},
setData: function (data) {
this._clearOperatorsLayer();
this.data.operatorTypes = {};
if (typeof data.operatorTypes != 'undefined') {
this.data.operatorTypes = data.operatorTypes;
}
this.data.operators = {};
for (var operatorId in data.operators) {
if (data.operators.hasOwnProperty(operatorId)) {
this.createOperator(operatorId, data.operators[operatorId]);
}
}
this.data.links = {};
for (var linkId in data.links) {
if (data.links.hasOwnProperty(linkId)) {
this.createLink(linkId, data.links[linkId]);
}
}
this.redrawLinksLayer();
},
addLink: function (linkData) {
while (typeof this.data.links[this.linkNum] != 'undefined') {
this.linkNum++;
}
this.createLink(this.linkNum, linkData);
return this.linkNum;
},
createLink: function (linkId, linkDataOriginal) {
var linkData = $.extend(true, {}, linkDataOriginal);
if (!this.callbackEvent('linkCreate', [linkId, linkData])) {
return;
}
var subConnectors = this._getSubConnectors(linkData);
var fromSubConnector = subConnectors[0];
var toSubConnector = subConnectors[1];
var multipleLinksOnOutput = this.options.multipleLinksOnOutput;
var multipleLinksOnInput = this.options.multipleLinksOnInput;
if (!multipleLinksOnOutput || !multipleLinksOnInput) {
for (var linkId2 in this.data.links) {
if (this.data.links.hasOwnProperty(linkId2)) {
var currentLink = this.data.links[linkId2];
var currentSubConnectors = this._getSubConnectors(currentLink);
var currentFromSubConnector = currentSubConnectors[0];
var currentToSubConnector = currentSubConnectors[1];
if (!multipleLinksOnOutput && !this.data.operators[linkData.fromOperator].properties.outputs[linkData.fromConnector].multipleLinks && currentLink.fromOperator == linkData.fromOperator && currentLink.fromConnector == linkData.fromConnector && currentFromSubConnector == fromSubConnector) {
this.deleteLink(linkId2);
continue;
}
if (!multipleLinksOnInput && !this.data.operators[linkData.toOperator].properties.inputs[linkData.toConnector].multipleLinks && currentLink.toOperator == linkData.toOperator && currentLink.toConnector == linkData.toConnector && currentToSubConnector == toSubConnector) {
this.deleteLink(linkId2);
}
}
}
}
this._autoCreateSubConnector(linkData.fromOperator, linkData.fromConnector, 'outputs', fromSubConnector);
this._autoCreateSubConnector(linkData.toOperator, linkData.toConnector, 'inputs', toSubConnector);
this.data.links[linkId] = linkData;
this._drawLink(linkId);
this.callbackEvent('afterChange', ['link_create']);
},
_autoCreateSubConnector: function (operator, connector, connectorType, subConnector) {
var connectorInfos = this.data.operators[operator].internal.properties[connectorType][connector];
if (connectorInfos.multiple) {
var fromFullElement = this.data.operators[operator].internal.els;
var nbFromConnectors = this.data.operators[operator].internal.els.connectors[connector].length;
for (var i = nbFromConnectors; i < subConnector + 2; i++) {
this._createSubConnector(connector, connectorInfos, fromFullElement);
}
}
},
_refreshOperatorConnectors: function (operatorId) {
for (var linkId in this.data.links) {
if (this.data.links.hasOwnProperty(linkId)) {
var linkData = this.data.links[linkId];
if (linkData.fromOperator == operatorId || linkData.toOperator == operatorId)
{
var subConnectors = this._getSubConnectors(linkData);
var fromSubConnector = subConnectors[0];
var toSubConnector = subConnectors[1];
this._autoCreateSubConnector(linkData.fromOperator, linkData.fromConnector, 'outputs', fromSubConnector);
this._autoCreateSubConnector(linkData.toOperator, linkData.toConnector, 'inputs', toSubConnector);
}
}
}
},
redrawLinksLayer: function () {
this._clearLinksLayer();
for (var linkId in this.data.links) {
if (this.data.links.hasOwnProperty(linkId)) {
this._drawLink(linkId);
}
}
},
_clearLinksLayer: function () {
this.objs.layers.links.empty();
if (this.options.verticalConnection) {
this.objs.layers.operators.find('.flowchart-operator-connector-small-arrow').css('border-top-color', 'transparent');
} else {
this.objs.layers.operators.find('.flowchart-operator-connector-small-arrow').css('border-left-color', 'transparent');
}
},
_clearOperatorsLayer: function () {
this.objs.layers.operators.empty();
},
getConnectorPosition: function (operatorId, connectorId, subConnector) {
var operatorData = this.data.operators[operatorId];
var $connector = operatorData.internal.els.connectorArrows[connectorId][subConnector];
var connectorOffset = $connector.offset();
var elementOffset = this.element.offset();
var x = (connectorOffset.left - elementOffset.left) / this.positionRatio;
var width = parseInt($connector.css('border-top-width'), 10);
var y = (connectorOffset.top - elementOffset.top - 1) / this.positionRatio + parseInt($connector.css('border-left-width'), 10);
return {x: x, width: width, y: y};
},
getLinkMainColor: function (linkId) {
var color = this.options.defaultLinkColor;
var linkData = this.data.links[linkId];
if (typeof linkData.color != 'undefined') {
color = linkData.color;
}
return color;
},
setLinkMainColor: function (linkId, color) {
this.data.links[linkId].color = color;
this.callbackEvent('afterChange', ['link_change_main_color']);
},
_drawLink: function (linkId) {
var linkData = this.data.links[linkId];
if (typeof linkData.internal == 'undefined') {
linkData.internal = {};
}
linkData.internal.els = {};
var fromOperatorId = linkData.fromOperator;
var fromConnectorId = linkData.fromConnector;
var toOperatorId = linkData.toOperator;
var toConnectorId = linkData.toConnector;
var subConnectors = this._getSubConnectors(linkData);
var fromSubConnector = subConnectors[0];
var toSubConnector = subConnectors[1];
var color = this.getLinkMainColor(linkId);
var fromOperator = this.data.operators[fromOperatorId];
var toOperator = this.data.operators[toOperatorId];
var fromSmallConnector = fromOperator.internal.els.connectorSmallArrows[fromConnectorId][fromSubConnector];
var toSmallConnector = toOperator.internal.els.connectorSmallArrows[toConnectorId][toSubConnector];
linkData.internal.els.fromSmallConnector = fromSmallConnector;
linkData.internal.els.toSmallConnector = toSmallConnector;
var overallGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
this.objs.layers.links[0].appendChild(overallGroup);
linkData.internal.els.overallGroup = overallGroup;
var mask = document.createElementNS("http://www.w3.org/2000/svg", "mask");
var maskId = "fc_mask_" + this.globalId + "_" + this.maskNum;
this.maskNum++;
mask.setAttribute("id", maskId);
overallGroup.appendChild(mask);
var shape = document.createElementNS("http://www.w3.org/2000/svg", "rect");
shape.setAttribute("x", "0");
shape.setAttribute("y", "0");
shape.setAttribute("width", "100%");
shape.setAttribute("height", "100%");
shape.setAttribute("stroke", "none");
shape.setAttribute("fill", "white");
mask.appendChild(shape);
var shape_polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
shape_polygon.setAttribute("stroke", "none");
shape_polygon.setAttribute("fill", "black");
mask.appendChild(shape_polygon);
linkData.internal.els.mask = shape_polygon;
var group = document.createElementNS("http://www.w3.org/2000/svg", "g");
group.setAttribute('class', 'flowchart-link');
group.setAttribute('data-link_id', linkId);
overallGroup.appendChild(group);
var shape_path = document.createElementNS("http://www.w3.org/2000/svg", "path");
shape_path.setAttribute("stroke-width", this.options.linkWidth.toString());
shape_path.setAttribute("fill", "none");
group.appendChild(shape_path);
linkData.internal.els.path = shape_path;
var shape_rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
shape_rect.setAttribute("stroke", "none");
shape_rect.setAttribute("mask", "url(#" + maskId + ")");
group.appendChild(shape_rect);
linkData.internal.els.rect = shape_rect;
this._refreshLinkPositions(linkId);
this.uncolorizeLink(linkId);
},
_getSubConnectors: function (linkData) {
var fromSubConnector = 0;
if (typeof linkData.fromSubConnector != 'undefined') {
fromSubConnector = linkData.fromSubConnector;
}
var toSubConnector = 0;
if (typeof linkData.toSubConnector != 'undefined') {
toSubConnector = linkData.toSubConnector;
}
return [fromSubConnector, toSubConnector];
},
_refreshLinkPositions: function (linkId) {
var linkData = this.data.links[linkId];
var subConnectors = this._getSubConnectors(linkData);
var fromSubConnector = subConnectors[0];
var toSubConnector = subConnectors[1];
var fromPosition = this.getConnectorPosition(linkData.fromOperator, linkData.fromConnector, fromSubConnector);
var toPosition = this.getConnectorPosition(linkData.toOperator, linkData.toConnector, toSubConnector);
var fromX = fromPosition.x;
var offsetFromX = fromPosition.width;
var fromY = fromPosition.y;
var toX = toPosition.x;
var toY = toPosition.y;
fromY += this.options.linkVerticalDecal;
toY += this.options.linkVerticalDecal;
var distanceFromArrow = this.options.distanceFromArrow;
linkData.internal.els.mask.setAttribute("points", fromX + ',' + (fromY - offsetFromX - distanceFromArrow) + ' ' + (fromX + offsetFromX + distanceFromArrow) + ',' + fromY + ' ' + fromX + ',' + (fromY + offsetFromX + distanceFromArrow));
var bezierFromX, bezierToX, bezierIntensity;
if (this.options.verticalConnection) {
fromY = fromY - 10;
toY = toY - 10;
bezierFromX = (fromX + offsetFromX + distanceFromArrow - 3);
bezierToX = (toX + offsetFromX + distanceFromArrow - 3);
bezierIntensity = Math.min(100, Math.max(Math.abs(bezierFromX - bezierToX) / 2, Math.abs(fromY - toY)));
linkData.internal.els.path.setAttribute("d", 'M' + bezierFromX + ',' + (fromY) + ' C' + bezierFromX + ',' + (fromY + bezierIntensity) + ' ' + bezierToX + ',' + (toY - bezierIntensity) + ' ' + bezierToX + ',' + toY);
linkData.internal.els.rect.setAttribute("x", fromX - 1 + this.options.linkWidth / 2);
} else {
bezierFromX = (fromX + offsetFromX + distanceFromArrow);
bezierToX = toX + 1;
bezierIntensity = Math.min(100, Math.max(Math.abs(bezierFromX - bezierToX) / 2, Math.abs(fromY - toY)));
linkData.internal.els.path.setAttribute("d", 'M' + bezierFromX + ',' + (fromY) + ' C' + (fromX + offsetFromX + distanceFromArrow + bezierIntensity) + ',' + fromY + ' ' + (toX - bezierIntensity) + ',' + toY + ' ' + bezierToX + ',' + toY);
linkData.internal.els.rect.setAttribute("x", fromX);
}
linkData.internal.els.rect.setAttribute("y", fromY - this.options.linkWidth / 2);
linkData.internal.els.rect.setAttribute("width", offsetFromX + distanceFromArrow + 1);
linkData.internal.els.rect.setAttribute("height", this.options.linkWidth);
},
getOperatorCompleteData: function (operatorData) {
if (typeof operatorData.internal == 'undefined') {
operatorData.internal = {};
}
this._refreshInternalProperties(operatorData);
var infos = $.extend(true, {}, operatorData.internal.properties);
for (var connectorId_i in infos.inputs) {
if (infos.inputs.hasOwnProperty(connectorId_i)) {
if (infos.inputs[connectorId_i] == null) {
delete infos.inputs[connectorId_i];
}
}
}
for (var connectorId_o in infos.outputs) {
if (infos.outputs.hasOwnProperty(connectorId_o)) {
if (infos.outputs[connectorId_o] == null) {
delete infos.outputs[connectorId_o];
}
}
}
if (typeof infos.class == 'undefined') {
infos.class = this.options.defaultOperatorClass;
}
return infos;
},
_getOperatorFullElement: function (operatorData) {
var infos = this.getOperatorCompleteData(operatorData);
var $operator = $('<div class="flowchart-operator"></div>');
$operator.addClass(infos.class);
var $operator_title = $('<div class="flowchart-operator-title"></div>');
$operator_title.html(infos.title);
$operator_title.appendTo($operator);
var $operator_body = $('<div class="flowchart-operator-body"></div>');
$operator_body.html(infos.body);
if (infos.body) {
$operator_body.appendTo($operator);
}
var $operator_inputs_outputs = $('<div class="flowchart-operator-inputs-outputs"></div>');
var $operator_inputs = $('<div class="flowchart-operator-inputs"></div>');
var $operator_outputs = $('<div class="flowchart-operator-outputs"></div>');
if (this.options.verticalConnection) {
$operator_inputs.prependTo($operator);
$operator_outputs.appendTo($operator);
} else {
$operator_inputs_outputs.appendTo($operator);
$operator_inputs.appendTo($operator_inputs_outputs);
$operator_outputs.appendTo($operator_inputs_outputs);
}
var self = this;
var connectorArrows = {};
var connectorSmallArrows = {};
var connectorSets = {};
var connectors = {};
var fullElement = {
operator: $operator,
title: $operator_title,
body: $operator_body,
connectorSets: connectorSets,
connectors: connectors,
connectorArrows: connectorArrows,
connectorSmallArrows: connectorSmallArrows
};
function addConnector(connectorKey, connectorInfos, $operator_container, connectorType) {
var $operator_connector_set = $('<div class="flowchart-operator-connector-set"></div>');
$operator_connector_set.data('connector_type', connectorType);
$operator_connector_set.appendTo($operator_container);
connectorArrows[connectorKey] = [];
connectorSmallArrows[connectorKey] = [];
connectors[connectorKey] = [];
connectorSets[connectorKey] = $operator_connector_set;
if ($.isArray(connectorInfos.label)) {
for (var i = 0; i < connectorInfos.label.length; i++) {
self._createSubConnector(connectorKey, connectorInfos.label[i], fullElement);
}
} else {
self._createSubConnector(connectorKey, connectorInfos, fullElement);
}
}
for (var key_i in infos.inputs) {
if (infos.inputs.hasOwnProperty(key_i)) {
addConnector(key_i, infos.inputs[key_i], $operator_inputs, 'inputs');
}
}
for (var key_o in infos.outputs) {
if (infos.outputs.hasOwnProperty(key_o)) {
addConnector(key_o, infos.outputs[key_o], $operator_outputs, 'outputs');
}
}
return fullElement;
},
_createSubConnector: function (connectorKey, connectorInfos, fullElement) {
var $operator_connector_set = fullElement.connectorSets[connectorKey];
var subConnector = fullElement.connectors[connectorKey].length;
var $operator_connector = $('<div class="flowchart-operator-connector"></div>');
$operator_connector.appendTo($operator_connector_set);
$operator_connector.data('connector', connectorKey);
$operator_connector.data('sub_connector', subConnector);
var $operator_connector_label = $('<div class="flowchart-operator-connector-label"></div>');
$operator_connector_label.text(connectorInfos.label.replace('(:i)', subConnector + 1));
$operator_connector_label.appendTo($operator_connector);
var $operator_connector_arrow = $('<div class="flowchart-operator-connector-arrow"></div>');
$operator_connector_arrow.appendTo($operator_connector);
var $operator_connector_small_arrow = $('<div class="flowchart-operator-connector-small-arrow"></div>');
$operator_connector_small_arrow.appendTo($operator_connector);
fullElement.connectors[connectorKey].push($operator_connector);
fullElement.connectorArrows[connectorKey].push($operator_connector_arrow);
fullElement.connectorSmallArrows[connectorKey].push($operator_connector_small_arrow);
},
getOperatorElement: function (operatorData) {
var fullElement = this._getOperatorFullElement(operatorData);
return fullElement.operator;
},
addOperator: function (operatorData) {
while (typeof this.data.operators[this.operatorNum] != 'undefined') {
this.operatorNum++;
}
this.createOperator(this.operatorNum, operatorData);
return this.operatorNum;
},
createOperator: function (operatorId, operatorData) {
operatorData.internal = {};
this._refreshInternalProperties(operatorData);
var fullElement = this._getOperatorFullElement(operatorData);
if (!this.callbackEvent('operatorCreate', [operatorId, operatorData, fullElement])) {
return false;
}
var grid = this.options.grid;
if (grid) {
operatorData.top = Math.round(operatorData.top / grid) * grid;
operatorData.left = Math.round(operatorData.left / grid) * grid;
}
fullElement.operator.appendTo(this.objs.layers.operators);
fullElement.operator.css({top: operatorData.top, left: operatorData.left});
fullElement.operator.data('operator_id', operatorId);
this.data.operators[operatorId] = operatorData;
this.data.operators[operatorId].internal.els = fullElement;
if (operatorId == this.selectedOperatorId) {
this._addSelectedClass(operatorId);
}
var self = this;
function operatorChangedPosition(operator_id, pos) {
operatorData.top = pos.top;
operatorData.left = pos.left;
for (var linkId in self.data.links) {
if (self.data.links.hasOwnProperty(linkId)) {
var linkData = self.data.links[linkId];
if (linkData.fromOperator == operator_id || linkData.toOperator == operator_id) {
self._refreshLinkPositions(linkId);
}
}
}
}
// Small fix has been added in order to manage eventual zoom
// http://stackoverflow.com/questions/2930092/jquery-draggable-with-zoom-problem
if (this.options.canUserMoveOperators) {
var pointerX;
var pointerY;
fullElement.operator.draggable({
containment: operatorData.internal.properties.uncontained ? false : this.element,
handle: '.flowchart-operator-title, .flowchart-operator-body',
start: function (e, ui) {
if (self.lastOutputConnectorClicked != null) {
e.preventDefault();
return;
}
var elementOffset = self.element.offset();
pointerX = (e.pageX - elementOffset.left) / self.positionRatio - parseInt($(e.target).css('left'), 10);
pointerY = (e.pageY - elementOffset.top) / self.positionRatio - parseInt($(e.target).css('top'), 10);
},
drag: function (e, ui) {
if (self.options.grid) {
var grid = self.options.grid;
var elementOffset = self.element.offset();
ui.position.left = Math.round(((e.pageX - elementOffset.left) / self.positionRatio - pointerX) / grid) * grid;
ui.position.top = Math.round(((e.pageY - elementOffset.top) / self.positionRatio - pointerY) / grid) * grid;
if (!operatorData.internal.properties.uncontained) {
var $this = $(this);
ui.position.left = Math.min(Math.max(ui.position.left, 0), self.element.width() - $this.outerWidth());
ui.position.top = Math.min(Math.max(ui.position.top, 0), self.element.height() - $this.outerHeight());
}
ui.offset.left = Math.round(ui.position.left + elementOffset.left);
ui.offset.top = Math.round(ui.position.top + elementOffset.top);
fullElement.operator.css({left: ui.position.left, top: ui.position.top});
}
operatorChangedPosition($(this).data('operator_id'), ui.position);
},
stop: function (e, ui) {
self._unsetTemporaryLink();
var operatorId = $(this).data('operator_id');
operatorChangedPosition(operatorId, ui.position);
fullElement.operator.css({
height: 'auto'
});
self.callbackEvent('operatorMoved', [operatorId, ui.position]);
self.callbackEvent('afterChange', ['operator_moved']);
}
});
}
this.callbackEvent('afterChange', ['operator_create']);
},
_connectorClicked: function (operator, connector, subConnector, connectorCategory) {
if (connectorCategory == 'outputs') {
var d = new Date();
// var currentTime = d.getTime();
this.lastOutputConnectorClicked = {
operator: operator,
connector: connector,
subConnector: subConnector
};
this.objs.layers.temporaryLink.show();
var position = this.getConnectorPosition(operator, connector, subConnector);
var x = position.x + position.width;
var y = position.y;
this.objs.temporaryLink.setAttribute('x1', x.toString());
this.objs.temporaryLink.setAttribute('y1', y.toString());
this._mousemove(x, y);
}
if (connectorCategory == 'inputs' && this.lastOutputConnectorClicked != null) {
var linkData = {
fromOperator: this.lastOutputConnectorClicked.operator,
fromConnector: this.lastOutputConnectorClicked.connector,
fromSubConnector: this.lastOutputConnectorClicked.subConnector,
toOperator: operator,
toConnector: connector,
toSubConnector: subConnector
};
this.addLink(linkData);
this._unsetTemporaryLink();
}
},
_unsetTemporaryLink: function () {
this.lastOutputConnectorClicked = null;
this.objs.layers.temporaryLink.hide();
},
_mousemove: function (x, y, e) {
if (this.lastOutputConnectorClicked != null) {
this.objs.temporaryLink.setAttribute('x2', x);
this.objs.temporaryLink.setAttribute('y2', y);
}
},
_click: function (x, y, e) {
var $target = $(e.target);
if ($target.closest('.flowchart-operator-connector').length == 0) {
this._unsetTemporaryLink();
}
if ($target.closest('.flowchart-operator').length == 0) {
this.unselectOperator();
}
if ($target.closest('.flowchart-link').length == 0) {
this.unselectLink();
}
},
_removeSelectedClassOperators: function () {
this.objs.layers.operators.find('.flowchart-operator').removeClass('selected');
},
unselectOperator: function () {
if (this.selectedOperatorId != null) {
if (!this.callbackEvent('operatorUnselect', [])) {
return;
}
this._removeSelectedClassOperators();
this.selectedOperatorId = null;
}
},
_addSelectedClass: function (operatorId) {
this.data.operators[operatorId].internal.els.operator.addClass('selected');
},
callbackEvent: function(name, params) {
var cbName = 'on' + name.charAt(0).toUpperCase() + name.slice(1);
var ret = this.options[cbName].apply(this, params);
if (ret !== false) {
var returnHash = {'result': ret};
this.element.trigger(name, params.concat([returnHash]));
ret = returnHash['result'];
}
return ret;
},
selectOperator: function (operatorId) {
if (!this.callbackEvent('operatorSelect', [operatorId])) {
return;
}
this.unselectLink();
this._removeSelectedClassOperators();
this._addSelectedClass(operatorId);
this.selectedOperatorId = operatorId;
},
addClassOperator: function (operatorId, className) {
this.data.operators[operatorId].internal.els.operator.addClass(className);
},
removeClassOperator: function (operatorId, className) {
this.data.operators[operatorId].internal.els.operator.removeClass(className);
},
removeClassOperators: function (className) {
this.objs.layers.operators.find('.flowchart-operator').removeClass(className);
},
_addHoverClassOperator: function (operatorId) {
this.data.operators[operatorId].internal.els.operator.addClass('hover');
},
_removeHoverClassOperators: function () {
this.objs.layers.operators.find('.flowchart-operator').removeClass('hover');
},
_operatorMouseOver: function (operatorId) {
if (!this.callbackEvent('operatorMouseOver', [operatorId])) {
return;
}
this._addHoverClassOperator(operatorId);
},
_operatorMouseOut: function (operatorId) {
if (!this.callbackEvent('operatorMouseOut', [operatorId])) {
return;
}
this._removeHoverClassOperators();
},
getSelectedOperatorId: function () {
return this.selectedOperatorId;
},
getSelectedLinkId: function () {
return this.selectedLinkId;
},
// Found here : http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
_shadeColor: function (color, percent) {
var f = parseInt(color.slice(1), 16), t = percent < 0 ? 0 : 255, p = percent < 0 ? percent * -1 : percent, R = f >> 16, G = f >> 8 & 0x00FF, B = f & 0x0000FF;
return "#" + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1);
},
colorizeLink: function (linkId, color) {
var linkData = this.data.links[linkId];
linkData.internal.els.path.setAttribute('stroke', color);
linkData.internal.els.rect.setAttribute('fill', color);
if (this.options.verticalConnection) {
linkData.internal.els.fromSmallConnector.css('border-top-color', color);
linkData.internal.els.toSmallConnector.css('border-top-color', color);
} else {
linkData.internal.els.fromSmallConnector.css('border-left-color', color);
linkData.internal.els.toSmallConnector.css('border-left-color', color);
}
},
uncolorizeLink: function (linkId) {
this.colorizeLink(linkId, this.getLinkMainColor(linkId));
},
_connecterMouseOver: function (linkId) {
if (this.selectedLinkId != linkId) {
this.colorizeLink(linkId, this._shadeColor(this.getLinkMainColor(linkId), -0.4));
}
},
_connecterMouseOut: function (linkId) {
if (this.selectedLinkId != linkId) {
this.uncolorizeLink(linkId);
}
},
unselectLink: function () {
if (this.selectedLinkId != null) {
if (!this.callbackEvent('linkUnselect', [])) {
return;
}
this.uncolorizeLink(this.selectedLinkId, this.options.defaultSelectedLinkColor);
this.selectedLinkId = null;
}
},
selectLink: function (linkId) {
this.unselectLink();
if (!this.callbackEvent('linkSelect', [linkId])) {
return;
}
this.unselectOperator();
this.selectedLinkId = linkId;
this.colorizeLink(linkId, this.options.defaultSelectedLinkColor);
},
deleteOperator: function (operatorId) {
this._deleteOperator(operatorId, false);
},
_deleteOperator: function (operatorId, replace) {
if (!this.callbackEvent('operatorDelete', [operatorId, replace])) {
return false;
}
if (!replace) {
for (var linkId in this.data.links) {
if (this.data.links.hasOwnProperty(linkId)) {
var currentLink = this.data.links[linkId];
if (currentLink.fromOperator == operatorId || currentLink.toOperator == operatorId) {
this._deleteLink(linkId, true);
}
}
}
}
if (!replace && operatorId == this.selectedOperatorId) {
this.unselectOperator();
}
this.data.operators[operatorId].internal.els.operator.remove();
delete this.data.operators[operatorId];
this.callbackEvent('afterChange', ['operator_delete']);
},
deleteLink: function (linkId) {
this._deleteLink(linkId, false);
},
_deleteLink: function (linkId, forced) {
if (this.selectedLinkId == linkId) {
this.unselectLink();
}
if (!this.callbackEvent('linkDelete', [linkId, forced])) {
if (!forced) {
return;
}
}
this.colorizeLink(linkId, 'transparent');
var linkData = this.data.links[linkId];
var fromOperator = linkData.fromOperator;
var fromConnector = linkData.fromConnector;
var toOperator = linkData.toOperator;
var toConnector = linkData.toConnector;
var overallGroup = linkData.internal.els.overallGroup;
if (overallGroup.remove) {
overallGroup.remove();
} else {
overallGroup.parentNode.removeChild(overallGroup);
}
delete this.data.links[linkId];
this._cleanMultipleConnectors(fromOperator, fromConnector, 'from');
this._cleanMultipleConnectors(toOperator, toConnector, 'to');
this.callbackEvent('afterChange', ['link_delete']);
},
_cleanMultipleConnectors: function (operator, connector, linkFromTo) {
if (!this.data.operators[operator].internal.properties[linkFromTo == 'from' ? 'outputs' : 'inputs'][connector].multiple) {
return;
}
var maxI = -1;
var fromToOperator = linkFromTo + 'Operator';
var fromToConnector = linkFromTo + 'Connector';
var fromToSubConnector = linkFromTo + 'SubConnector';
var els = this.data.operators[operator].internal.els;
var subConnectors = els.connectors[connector];
var nbSubConnectors = subConnectors.length;
for (var linkId in this.data.links) {
if (this.data.links.hasOwnProperty(linkId)) {
var linkData = this.data.links[linkId];
if (linkData[fromToOperator] == operator && linkData[fromToConnector] == connector) {
if (maxI < linkData[fromToSubConnector]) {
maxI = linkData[fromToSubConnector];
}
}
}
}
var nbToDelete = Math.min(nbSubConnectors - maxI - 2, nbSubConnectors - 1);
for (var i = 0; i < nbToDelete; i++) {
subConnectors[subConnectors.length - 1].remove();
subConnectors.pop();
els.connectorArrows[connector].pop();
els.connectorSmallArrows[connector].pop();
}
},
deleteSelected: function () {
if (this.selectedLinkId != null) {
this.deleteLink(this.selectedLinkId);
}
if (this.selectedOperatorId != null) {
this.deleteOperator(this.selectedOperatorId);
}
},
setPositionRatio: function (positionRatio) {
this.positionRatio = positionRatio;
},
getPositionRatio: function () {
return this.positionRatio;
},
getData: function () {
var keys = ['operators', 'links'];
var data = {};
data.operators = $.extend(true, {}, this.data.operators);
data.links = $.extend(true, {}, this.data.links);
for (var keyI in keys) {
if (keys.hasOwnProperty(keyI)) {
var key = keys[keyI];
for (var objId in data[key]) {
if (data[key].hasOwnProperty(objId)) {
delete data[key][objId].internal;
}
}
}
}
data.operatorTypes = this.data.operatorTypes;
return data;
},
getDataRef: function () {
return this.data;
},
setOperatorTitle: function (operatorId, title) {
this.data.operators[operatorId].internal.els.title.html(title);
if (typeof this.data.operators[operatorId].properties == 'undefined') {
this.data.operators[operatorId].properties = {};
}
this.data.operators[operatorId].properties.title = title;
this._refreshInternalProperties(this.data.operators[operatorId]);
this.callbackEvent('afterChange', ['operator_title_change']);
},
setOperatorBody: function (operatorId, body) {
this.data.operators[operatorId].internal.els.body.html(body);
if (typeof this.data.operators[operatorId].properties == 'undefined') {
this.data.operators[operatorId].properties = {};
}
this.data.operators[operatorId].properties.body = body;
this._refreshInternalProperties(this.data.operators[operatorId]);
this.callbackEvent('afterChange', ['operator_body_change']);
},
getOperatorTitle: function (operatorId) {
return this.data.operators[operatorId].internal.properties.title;
},
getOperatorBody: function (operatorId) {
return this.data.operators[operatorId].internal.properties.body;
},
setOperatorData: function (operatorId, operatorData) {
var infos = this.getOperatorCompleteData(operatorData);
for (var linkId in this.data.links) {
if (this.data.links.hasOwnProperty(linkId)) {
var linkData = this.data.links[linkId];
if ((linkData.fromOperator == operatorId && typeof infos.outputs[linkData.fromConnector] == 'undefined') ||
(linkData.toOperator == operatorId && typeof infos.inputs[linkData.toConnector] == 'undefined')) {
this._deleteLink(linkId, true);
}
}
}
this._deleteOperator(operatorId, true);
this.createOperator(operatorId, operatorData);
this._refreshOperatorConnectors(operatorId);
this.redrawLinksLayer();
this.callbackEvent('afterChange', ['operator_data_change']);
},
getBoundingOperatorRect: function (operatorId) {
if (!this.data.operators[operatorId]) {
return null;
}
var elOperator = this.data.operators[operatorId].internal.els.operator;
var operator = this.data.operators[operatorId];
return {
'left': operator.left,
'top': operator.top,
'width': elOperator.width(),
'height': elOperator.height(),
};
},
doesOperatorExists: function (operatorId) {
return typeof this.data.operators[operatorId] != 'undefined';
},
getOperatorData: function (operatorId) {
var data = $.extend(true, {}, this.data.operators[operatorId]);
delete data.internal;
return data;
},
getLinksFrom: function(operatorId) {
var result = [];
for (var linkId in this.data.links) {
if (this.data.links.hasOwnProperty(linkId)) {
var linkData = this.data.links[linkId];
if (linkData.fromOperator === operatorId) {
result.push(linkData);
}
}
}
return result;
},
getLinksTo: function(operatorId) {
var result = [];
for (var linkId in this.data.links) {
if (this.data.links.hasOwnProperty(linkId)) {
var linkData = this.data.links[linkId];
if (linkData.toOperator === operatorId) {
result.push(linkData);
}
}
}
return result;
},
getOperatorFullProperties: function (operatorData) {
if (typeof operatorData.type != 'undefined') {
var typeProperties = this.data.operatorTypes[operatorData.type];
var operatorProperties = {};
if (typeof operatorData.properties != 'undefined') {
operatorProperties = operatorData.properties;
}
return $.extend({}, typeProperties, operatorProperties);
} else {
return operatorData.properties;
}
},
_refreshInternalProperties: function (operatorData) {
operatorData.internal.properties = this.getOperatorFullProperties(operatorData);
}
});
});
================================================
FILE: package.json
================================================
{
"name": "jquery.flowchart",
"description": "JQuery UI plugin that allows you to draw a flow chart.",
"version": "1.1.0",
"licenses": [
{
"type": "MIT",
"url": "https://github.com/sdrdis/jquery.flowchart/blob/master/MIT-LICENSE.txt"
}
],
"title": "Flowchart",
"keywords": [
"flowchart",
"flow",
"chart",
"graph",
"ui",
"jquery-plugin",
"ecosystem:jquery"
],
"author": {
"url": "http://sebastien.drouyer.com",
"name": "Sébastien Drouyer"
},
"maintainers": [
{
"name": "Sébastien Drouyer",
"url": "http://sebastien.drouyer.com"
}
],
"repository": {
"type": "git",
"url": "https://github.com/sdrdis/jquery.flowchart"
},
"homepage": "http://sebastien.drouyer.com/jquery.flowchart-demo/",
"docs": "https://github.com/sdrdis/jquery.flowchart/",
"bugs": "https://github.com/sdrdis/jquery.flowchart/issues",
"dependencies": {
"jquery": ">=1.10",
"jquery-ui": ">=1.11"
}
}
gitextract_m5zdubwc/ ├── MIT-LICENSE.txt ├── README.md ├── demo.html ├── flowchart.jquery.json ├── jquery.flowchart.css ├── jquery.flowchart.js └── package.json
SYMBOL INDEX (2 symbols across 1 files)
FILE: jquery.flowchart.js
function addConnector (line 563) | function addConnector(connectorKey, connectorInfos, $operator_container,...
function operatorChangedPosition (line 666) | function operatorChangedPosition(operator_id, pos) {
Condensed preview — 7 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (88K chars).
[
{
"path": "MIT-LICENSE.txt",
"chars": 1099,
"preview": "Copyright 2016 Sebastien Drouyer\nhttps://github.com/sdrdis/jquery.flowchart\n\nPermission is hereby granted, free of charg"
},
{
"path": "README.md",
"chars": 16593,
"preview": "jquery.flowchart\n================\n\nJavascript jQuery plugin that allows you to draw a flow chart. Take a look at the dem"
},
{
"path": "demo.html",
"chars": 9554,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n\t<title>Home</title>\n\t<meta charset=\"utf-8\">\n\n\t<meta name=\"viewport\" content=\"w"
},
{
"path": "flowchart.jquery.json",
"chars": 985,
"preview": "{\n \"name\": \"jquery.flowchart\",\n \"description\": \"JQuery UI plugin that allows you to draw a flow chart.\",\n \"version\": "
},
{
"path": "jquery.flowchart.css",
"chars": 4676,
"preview": "/*\n * jquery.flowchart - CSS definitions\n */\n\n.flowchart-container {\n position: relative;\n overflow: hidden;\n}\n\n.f"
},
{
"path": "jquery.flowchart.js",
"chars": 49615,
"preview": "if (!('remove' in Element.prototype)) {\n Element.prototype.remove = function() {\n if (this.parentNode) {\n "
},
{
"path": "package.json",
"chars": 994,
"preview": "{\n \"name\": \"jquery.flowchart\",\n \"description\": \"JQuery UI plugin that allows you to draw a flow chart.\",\n \"version\": "
}
]
About this extraction
This page contains the full source code of the sdrdis/jquery.flowchart GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 7 files (81.6 KB), approximately 18.9k tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.