Repository: adrai/flowchart.js
Branch: master
Commit: 0186b39a95f1
Files: 36
Total size: 179.5 KB
Directory structure:
gitextract_z05x90lu/
├── .eslintignore
├── .eslintrc
├── .github/
│ └── FUNDING.yml
├── .gitignore
├── .gitmodules
├── .npmignore
├── README.md
├── devserver.js
├── example/
│ ├── index.html
│ ├── loadFile.html
│ └── test.txt
├── index.html
├── index.js
├── license
├── package.json
├── release/
│ └── flowchart.js
├── releasenotes.md
├── src/
│ ├── flowchart.chart.js
│ ├── flowchart.defaults.js
│ ├── flowchart.functions.js
│ ├── flowchart.helpers.js
│ ├── flowchart.parse.js
│ ├── flowchart.shim.js
│ ├── flowchart.symbol.condition.js
│ ├── flowchart.symbol.end.js
│ ├── flowchart.symbol.input.js
│ ├── flowchart.symbol.inputoutput.js
│ ├── flowchart.symbol.js
│ ├── flowchart.symbol.operation.js
│ ├── flowchart.symbol.output.js
│ ├── flowchart.symbol.parallel.js
│ ├── flowchart.symbol.start.js
│ ├── flowchart.symbol.subroutine.js
│ └── jquery-plugin.js
├── types/
│ └── index.d.ts
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintignore
================================================
**/node_modules/
================================================
FILE: .eslintrc
================================================
{
"extends": "defaults",
"env": {
"browser": true,
"node": true
},
"globals": {
"$": true
},
"rules": {
"no-console": 0
}
}
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: [adrai] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
================================================
FILE: .gitignore
================================================
$ cat .gitignore
# Can ignore specific files
.settings.xml
.monitor
.DS_Store
.idea
# Use wildcards as well
*~
#*.swp
# Can also ignore all directories and files in a directory.
node_modules
node_modules/**/*
bin
reports
reports/**/*
package-lock.json
================================================
FILE: .gitmodules
================================================
[submodule "site"]
path = site
url = git@github.com:adrai/flowchart.js.git
================================================
FILE: .npmignore
================================================
example
imgs
site
release
bin
releasenotes.md
webpack.config.js
index.html
devserver.js
bower.json
.eslintignore
.eslintrc
.gitmodules
================================================
FILE: README.md
================================================
[](http://js.org)
# [flowchart.js](http://flowchart.js.org)
flowchart.js is a flowchart DSL and SVG render that runs in the browser and [terminal](https://github.com/francoislaberge/diagrams/#flowchart).
Nodes and connections are defined separately so that nodes can be reused and connections can be quickly changed.
Fine grain changes to node and connection style can also be made right in the DSL.
## Example
```flowchart
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
getInfo=>input: Input Info
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
printInfo=>output: Print info
para=>parallel: parallel tasks
st->getInfo->op1->cond
cond(yes)->io->printInfo->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1
```
## CLI
See [francoislaberge/diagrams](https://github.com/francoislaberge/diagrams/#flowchart) on how to flowchart.js in the terminal.
## Browser Usage
flowchart.js is on [CDNJS](https://cdnjs.com/libraries/flowchart), feel free to use it.
You will also need [Raphaël](http://www.raphaeljs.com/), which is also on [CDNJS](https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js).
The demo html page is at [example/index.html](example/index.html).
## Node Syntax
`nodeName=>nodeType: nodeText[|flowstate][:>urlLink]`
Items in `[]` are optional.
_nodeName_ defines the nodes variable name within the flowchart document.
_nodeType_ defines what type the node is. See **Node Types** for more information.
_nodeText_ is the text that will be inserted into the node. Newlines are allowed and will be reflected in the rendered node text.
_flowstate_ is optional and uses the `|` operator that specifies extra styling for the node.
_urlLink_ is optional and uses the `:>` operator to specify the url to link to.
## Node Types
Defines the shape that the node will take.
### start
Used as the first node where flows start from.
Default text is `Start`.
```flowchart
st=>start: start
```
### end
Used as the last node where a flow ends.
Default text is `End`.
```flowchart
e=>end: end
```
### operation
Indicates that an operation needs to happen in the flow.
```flowchart
op1=>operation: operation
```
### inputoutput
Indicates that IO happens in a flow.
```flowchart
io=>inputoutput: inputoutput
```
### input
Indicates that Input happens in a flow.
```flowchart
getInfo=>input: Input info
```
### output
Indicates that Output happens in a flow.
```flowchart
printInfo=>output: Print info
```
### subroutine
Indicates that a subroutine happens in the flow and that there should be another flowchart that documents this subroutine.
```flowchart
sub1=>subroutine: subroutine
```
### condition
Allows for a conditional or logical statement to direct the flow into one of two paths.
```flowchart
cond=>condition: condition
Yes or No?
```
### parallel
Allows for multiple flows to happen simultaneously.
```flowchart
para=>parallel: parallel
```
## Connections
Connections are defined in their own section below the node definitions.
The `->` operator specifies a connection from one node to another like `nodeVar1->nodeVar2->nodeVar3`.
Not all nodes need to be specified in one string and can be separaged like so
```flowchart
nodeVar1->nodeVar2
nodeVar2->nodeVar3
```
Connection syntax is as follows:
`<node variable name>[(<specification1>[, <specification2])]-><node variable name>[[(<specification1>[, <specification2])]-><node variable name>]`
Items in `[]` are optional.
### Directions
The following directions are available and define the direction the connection will leave the node from. If there are more than one specifiers, it is always the last. All nodes have a default direction making this an optional specification. `<direction>` will be used to indicate that one of the following should be used in its place.
* left
* right
* top
* bottom
### Node Specific Specifiers by Type
Each node variables has optional specifiers, like direction, and some have special specifiers depending on the node type that are defined below. Specifiers are added after the variable name in `()` and separated with `,` like `nodeVar(spec1, spec2)`.
### start
Optional direction
`startVar(<direction>)->nextNode`
### end
No specifications because connections only go to the end node and do not leave from it.
`previousNode->endVar`
### operation
Optional direction
`operationVar(<direction>)->nextNode`
### inputoutput
Optional direction
`inputoutputVar(<direction>)->nextNode`
### subroutine
Optional direction
`subroutineVar(<direction>)->nextNode`
### condition
Required logical specification of `yes` or `no`
Optional direction
```flowchart
conditionalVar(yes, <direction>)->nextNode1
conditionalVar(no, <direction>)->nextNode2
```
### parallel
Required path specification of `path1`, `path2`, or `path3`
Optional direction
```flowchart
parallelVar(path1, <direction>)->nextNode1
parallelVar(path2, <direction>)->nextNode2
parallelVar(path3, <direction>)->nextNode3
```
## Links
A external link can be added to a node with the `:>` operator.
The `st` node is linked to `http://www.google.com` and will open a new tab because `[blank]` is at the end of the URL.
The `e` node is linked to `http://www.yahoo.com` and will cause the page to navigate to that page instead of opening a new tab.
```flowchart
st=>start: Start:>http://www.google.com[blank]
e=>end: End:>http://www.yahoo.com
```
## Advice
Symbols that should possibly not be used in the text: `=>` and `->` and `:>` and `|` and `@>` and `:$`
If you want to emphasize a specific path in your flowchart, you can additionally define it like this:
```
st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})
```
## Custom names for branches
```
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: linear or polynomial :>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: 3 possibilities
st->op1->cond
cond(true@linear)->io->e
cond(false@polynomial)->sub1(right)
sub1(right)->para
para(path1@an1, top)->cond
para(path2@an2, right)->op1
para(path3@an3, bottom)->e
```
<details>
<summary>Demonstration</summary>
</details>
## Contributors
via [GitHub](https://github.com/adrai/flowchart.js/graphs/contributors)
## Thanks
Many thanks to [js-sequence-diagrams](http://bramp.github.io/js-sequence-diagrams/) which greatly inspired this project, and forms the basis for the syntax.
================================================
FILE: devserver.js
================================================
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config');
var port = 8000;
var app = express();
var compiler = webpack(config);
app.use(express.static(process.cwd()));
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(port, '0.0.0.0', function (err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://0.0.0.0:%s', port);
});
================================================
FILE: example/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flowchart.js · Playground</title>
<style type="text/css">
.end-element { fill : #FFCCFF; }
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://flowchart.js.org/flowchart-latest.js"></script>
<!-- <script src="../release/flowchart.min.js"></script> -->
<script>
window.onload = function () {
var btn = document.getElementById("run"),
cd = document.getElementById("code"),
chart;
(btn.onclick = function () {
var code = cd.value;
if (chart) {
chart.clean();
}
chart = flowchart.parse(code);
chart.drawSVG('canvas', {
// 'x': 30,
// 'y': 50,
'line-width': 3,
'maxWidth': 3,//ensures the flowcharts fits within a certian width
'line-length': 50,
'text-margin': 10,
'font-size': 14,
'font': 'normal',
'font-family': 'Helvetica',
'font-weight': 'normal',
'font-color': 'black',
'line-color': 'black',
'element-color': 'black',
'fill': 'white',
'yes-text': 'yes',
'no-text': 'no',
'arrow-end': 'block',
'scale': 1,
'symbols': {
'start': {
'font-color': 'red',
'element-color': 'green',
'fill': 'yellow'
},
'end':{
'class': 'end-element'
}
},
'flowstate' : {
'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
'future' : { 'fill' : '#FFFF99'},
'request' : { 'fill' : 'blue'},
'invalid': {'fill' : '#444444'},
'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
}
});
$('[id^=sub1]').click(function(){
alert('info here');
});
})();
};
function myFunction(event, node) {
console.log("You just clicked this node:", node);
}
</script>
</head>
<body>
<div><textarea id="code" style="width: 100%;" rows="11">
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past:$myFunction
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request
para=>parallel: parallel tasks
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->para
c2(true)->io->e
c2(false)->e
para(path1, bottom)->sub1(left)->op1
para(path2, right)->op2->e
st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})</textarea></div>
<div><button id="run" type="button">Run</button></div>
<div id="canvas"></div>
</body>
</html>
================================================
FILE: example/loadFile.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flowchart.js · Playground</title>
<style type="text/css">
.end-element { background-color : #FFCCFF; }
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://flowchart.js.org/flowchart-latest.js"></script>
<!--<script src="../bin/flowchart-latest.js"></script>-->
<!--<script src="../release/flowchart-1.4.1.min.js"></script>-->
<script>
$(document).ready(function() {
$.ajax({
url : "test.txt",
dataType : "text",
success : function(data) {
var chart = flowchart.parse(data);
chart.drawSVG('canvas');
}
});
});
</script>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
================================================
FILE: example/test.txt
================================================
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Ooooperation:$myFunction
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
================================================
FILE: index.html
================================================
<!doctype html>
<html lang="en">
<head>
<title>Demo page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
</head>
<body>
<div id="chart">
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past:$myFunction
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request
para=>parallel: parallel tasks
in=>input: some in
out=>output: some out
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->para
c2(true)->io->e
c2(false)->e
para(path1, left)->sub1(top)->op1
para(path2, right)->op2->e
para(path3, bottom)->in->out->e
</div>
<script>
function myFunction(event, node) {
console.log("You just clicked this node:", node);
}
</script>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/raphael/raphael.js"></script>
<script src="/release/flowchart.js"></script>
<script>
$('#chart').flowChart();
</script>
</body>
</html>
================================================
FILE: index.js
================================================
require('./src/flowchart.shim');
var parse = require('./src/flowchart.parse');
require('./src/jquery-plugin');
var FlowChart = {
parse: parse
};
if (typeof window !== 'undefined') {
window.flowchart = FlowChart;
}
module.exports = FlowChart;
================================================
FILE: license
================================================
The MIT License (MIT)
Copyright (c) 2023 Adriano Raiano
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: package.json
================================================
{
"author": "adrai",
"name": "flowchart.js",
"version": "1.18.0",
"main": "./index",
"private": false,
"engines": {
"node": ">=4.0.0"
},
"dependencies": {
"raphael": "2.3.0"
},
"types": "types/index.d.ts",
"devDependencies": {
"eslint": "^4.18.2",
"eslint-config-defaults": "^8.0.2",
"express": ">= 0.0.1",
"jquery": "^3.4.0",
"lodash": ">=0.2.1",
"moment": "^2.11.1",
"webpack": "^1.12.11",
"webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.6.0"
},
"scripts": {
"init": "git submodule init && git submodule update && git submodule status",
"start": "node devserver.js",
"lint": "eslint src",
"build:unminified": "NODE_ENV=production webpack -d --config webpack.config.js",
"build:minified": "NODE_ENV=production MINIFIED=1 webpack -d --config webpack.config.js",
"build": "npm run build:unminified && npm run build:minified && cp ./release/flowchart.js ./site/flowchart-latest.js",
"test": "npm run lint"
},
"repository": {
"type": "git",
"url": "https://github.com/adrai/flowchart.js.git"
},
"keywords": [
"flowchart",
"client",
"script"
],
"homepage": "http://flowchart.js.org/",
"license": "MIT"
}
================================================
FILE: release/flowchart.js
================================================
// flowchart.js, v1.18.0
// Copyright (c)2023 Adriano Raiano (adrai).
// Distributed under MIT license
// http://adrai.github.io/flowchart.js
!function(root, factory) {
if ("object" == typeof exports && "object" == typeof module) module.exports = factory(require("Raphael")); else if ("function" == typeof define && define.amd) define([ "Raphael" ], factory); else {
var a = factory("object" == typeof exports ? require("Raphael") : root.Raphael);
for (var i in a) ("object" == typeof exports ? exports : root)[i] = a[i];
}
}(this, function(__WEBPACK_EXTERNAL_MODULE_18__) {
/******/
return function(modules) {
/******/
/******/
// The require function
/******/
function __webpack_require__(moduleId) {
/******/
/******/
// Check if module is in cache
/******/
if (installedModules[moduleId]) /******/
return installedModules[moduleId].exports;
/******/
/******/
// Create a new module (and put it into the cache)
/******/
var module = installedModules[moduleId] = {
/******/
exports: {},
/******/
id: moduleId,
/******/
loaded: !1
};
/******/
/******/
// Return the exports of the module
/******/
/******/
/******/
// Execute the module function
/******/
/******/
/******/
// Flag the module as loaded
/******/
return modules[moduleId].call(module.exports, module, module.exports, __webpack_require__),
module.loaded = !0, module.exports;
}
// webpackBootstrap
/******/
// The module cache
/******/
var installedModules = {};
/******/
/******/
// Load entry module and return exports
/******/
/******/
/******/
/******/
// expose the modules object (__webpack_modules__)
/******/
/******/
/******/
// expose the module cache
/******/
/******/
/******/
// __webpack_public_path__
/******/
return __webpack_require__.m = modules, __webpack_require__.c = installedModules,
__webpack_require__.p = "", __webpack_require__(0);
}([ /* 0 */
/*!******************!*\
!*** ./index.js ***!
\******************/
/***/
function(module, exports, __webpack_require__) {
__webpack_require__(/*! ./src/flowchart.shim */ 9);
var parse = __webpack_require__(/*! ./src/flowchart.parse */ 4);
__webpack_require__(/*! ./src/jquery-plugin */ 17);
var FlowChart = {
parse: parse
};
"undefined" != typeof window && (window.flowchart = FlowChart), module.exports = FlowChart;
}, /* 1 */
/*!**********************************!*\
!*** ./src/flowchart.helpers.js ***!
\**********************************/
/***/
function(module, exports) {
function _defaults(options, defaultOptions) {
if (!options || "function" == typeof options) return defaultOptions;
var merged = {};
for (var attrname in defaultOptions) merged[attrname] = defaultOptions[attrname];
for (attrname in options) options[attrname] && ("object" == typeof merged[attrname] ? merged[attrname] = _defaults(merged[attrname], options[attrname]) : merged[attrname] = options[attrname]);
return merged;
}
function _inherits(ctor, superCtor) {
if ("function" == typeof Object.create) // implementation from standard node.js 'util' module
ctor.super_ = superCtor, ctor.prototype = Object.create(superCtor.prototype, {
constructor: {
value: ctor,
enumerable: !1,
writable: !0,
configurable: !0
}
}); else {
// old school shim for old browsers
ctor.super_ = superCtor;
var TempCtor = function() {};
TempCtor.prototype = superCtor.prototype, ctor.prototype = new TempCtor(), ctor.prototype.constructor = ctor;
}
}
// move dependent functions to a container so that
// they can be overriden easier in no jquery environment (node.js)
module.exports = {
defaults: _defaults,
inherits: _inherits
};
}, /* 2 */
/*!*********************************!*\
!*** ./src/flowchart.symbol.js ***!
\*********************************/
/***/
function(module, exports, __webpack_require__) {
function Symbol(chart, options, symbol) {
this.chart = chart, this.group = this.chart.paper.set(), this.symbol = symbol, this.connectedTo = [],
this.symbolType = options.symbolType, this.flowstate = options.flowstate || "future",
this.lineStyle = options.lineStyle || {}, this.key = options.key || "", this.leftLines = [],
this.rightLines = [], this.topLines = [], this.bottomLines = [], this.params = options.params,
this.next_direction = options.next && options.direction_next ? options.direction_next : void 0,
this.text = this.chart.paper.text(0, 0, options.text), //Raphael does not support the svg group tag so setting the text node id to the symbol node id plus t
options.key && (this.text.node.id = options.key + "t"), this.text.node.setAttribute("class", this.getAttr("class") + "t"),
this.text.attr({
"text-anchor": "start",
x: this.getAttr("text-margin"),
fill: this.getAttr("font-color"),
"font-size": this.getAttr("font-size")
});
var font = this.getAttr("font"), fontF = this.getAttr("font-family"), fontW = this.getAttr("font-weight");
font && this.text.attr({
font: font
}), fontF && this.text.attr({
"font-family": fontF
}), fontW && this.text.attr({
"font-weight": fontW
}), options.link && this.text.attr("href", options.link), //ndrqu Add click function with event and options params
options.function && (this.text.attr({
cursor: "pointer"
}), this.text.node.addEventListener("click", function(evt) {
window[options.function](evt, options);
}, !1)), options.target && this.text.attr("target", options.target);
var maxWidth = this.getAttr("maxWidth");
if (maxWidth) {
for (var words = options.text.split(" "), tempText = "", i = 0, ii = words.length; i < ii; i++) {
var word = words[i];
this.text.attr("text", tempText + " " + word), tempText += this.text.getBBox().width > maxWidth ? "\n" + word : " " + word;
}
this.text.attr("text", tempText.substring(1));
}
if (this.group.push(this.text), symbol) {
var tmpMargin = this.getAttr("text-margin");
symbol.attr({
fill: this.getAttr("fill"),
stroke: this.getAttr("element-color"),
"stroke-width": this.getAttr("line-width"),
width: this.text.getBBox().width + 2 * tmpMargin,
height: this.text.getBBox().height + 2 * tmpMargin
}), symbol.node.setAttribute("class", this.getAttr("class"));
var roundness = this.getAttr("roundness");
isNaN(roundness) || (symbol.node.setAttribute("ry", roundness), symbol.node.setAttribute("rx", roundness)),
options.link && symbol.attr("href", options.link), options.target && symbol.attr("target", options.target),
//ndrqu Add click function with event and options params
options.function && (symbol.node.addEventListener("click", function(evt) {
window[options.function](evt, options);
}, !1), symbol.attr({
cursor: "pointer"
})), options.key && (symbol.node.id = options.key), this.group.push(symbol), symbol.insertBefore(this.text),
this.text.attr({
y: symbol.getBBox().height / 2
}), this.initialize();
}
}
var drawAPI = __webpack_require__(/*! ./flowchart.functions */ 3), drawLine = drawAPI.drawLine, checkLineIntersection = drawAPI.checkLineIntersection;
/* Gets the attribute based on Flowstate, Symbol-Name and default, first found wins */
Symbol.prototype.getAttr = function(attName) {
if (this.chart) {
var opt1, opt3 = this.chart.options ? this.chart.options[attName] : void 0, opt2 = this.chart.options.symbols ? this.chart.options.symbols[this.symbolType][attName] : void 0;
return this.chart.options.flowstate && this.chart.options.flowstate[this.flowstate] && (opt1 = this.chart.options.flowstate[this.flowstate][attName]),
opt1 || opt2 || opt3;
}
}, Symbol.prototype.initialize = function() {
this.group.transform("t" + this.getAttr("line-width") + "," + this.getAttr("line-width")),
this.width = this.group.getBBox().width, this.height = this.group.getBBox().height;
}, Symbol.prototype.getCenter = function() {
return {
x: this.getX() + this.width / 2,
y: this.getY() + this.height / 2
};
}, Symbol.prototype.getX = function() {
return this.group.getBBox().x;
}, Symbol.prototype.getY = function() {
return this.group.getBBox().y;
}, Symbol.prototype.shiftX = function(x) {
this.group.transform("t" + (this.getX() + x) + "," + this.getY());
}, Symbol.prototype.setX = function(x) {
this.group.transform("t" + x + "," + this.getY());
}, Symbol.prototype.shiftY = function(y) {
this.group.transform("t" + this.getX() + "," + (this.getY() + y));
}, Symbol.prototype.setY = function(y) {
this.group.transform("t" + this.getX() + "," + y);
}, Symbol.prototype.getTop = function() {
var y = this.getY(), x = this.getX() + this.width / 2;
return {
x: x,
y: y
};
}, Symbol.prototype.getBottom = function() {
var y = this.getY() + this.height, x = this.getX() + this.width / 2;
return {
x: x,
y: y
};
}, Symbol.prototype.getLeft = function() {
var y = this.getY() + this.group.getBBox().height / 2, x = this.getX();
return {
x: x,
y: y
};
}, Symbol.prototype.getRight = function() {
var y = this.getY() + this.group.getBBox().height / 2, x = this.getX() + this.group.getBBox().width;
return {
x: x,
y: y
};
}, Symbol.prototype.render = function() {
if (this.next) {
var self = this, lineLength = this.getAttr("line-length");
if ("right" === this.next_direction) {
var rightPoint = this.getRight();
this.next.isPositioned || (this.next.setY(rightPoint.y - this.next.height / 2),
this.next.shiftX(this.group.getBBox().x + this.width + lineLength), function shift() {
for (var symb, hasSymbolUnder = !1, i = 0, len = self.chart.symbols.length; i < len; i++) {
symb = self.chart.symbols[i];
var diff = Math.abs(symb.getCenter().x - self.next.getCenter().x);
if (symb.getCenter().y > self.next.getCenter().y && diff <= self.next.width / 2) {
hasSymbolUnder = !0;
break;
}
}
if (hasSymbolUnder) {
if ("end" === self.next.symbolType) return;
self.next.setX(symb.getX() + symb.width + lineLength), shift();
}
}(), this.next.isPositioned = !0, this.next.render());
} else if ("left" === this.next_direction) {
var leftPoint = this.getLeft();
this.next.isPositioned || (this.next.setY(leftPoint.y - this.next.height / 2), this.next.shiftX(-(this.group.getBBox().x + this.width + lineLength)),
function shift() {
for (var symb, hasSymbolUnder = !1, i = 0, len = self.chart.symbols.length; i < len; i++) {
symb = self.chart.symbols[i];
var diff = Math.abs(symb.getCenter().x - self.next.getCenter().x);
if (symb.getCenter().y > self.next.getCenter().y && diff <= self.next.width / 2) {
hasSymbolUnder = !0;
break;
}
}
if (hasSymbolUnder) {
if ("end" === self.next.symbolType) return;
self.next.setX(symb.getX() + symb.width + lineLength), shift();
}
}(), this.next.isPositioned = !0, this.next.render());
} else {
var bottomPoint = this.getBottom();
this.next.isPositioned || (this.next.shiftY(this.getY() + this.height + lineLength),
this.next.setX(bottomPoint.x - this.next.width / 2), this.next.isPositioned = !0,
this.next.render());
}
}
}, Symbol.prototype.renderLines = function() {
this.next && (this.next_direction ? this.drawLineTo(this.next, this.getAttr("arrow-text") || "", this.next_direction) : this.drawLineTo(this.next, this.getAttr("arrow-text") || ""));
}, Symbol.prototype.drawLineTo = function(symbol, text, origin) {
this.connectedTo.indexOf(symbol) < 0 && this.connectedTo.push(symbol);
var line, yOffset, x = this.getCenter().x, y = this.getCenter().y, right = this.getRight(), bottom = this.getBottom(), top = this.getTop(), left = this.getLeft(), symbolX = symbol.getCenter().x, symbolY = symbol.getCenter().y, symbolTop = symbol.getTop(), symbolRight = symbol.getRight(), symbolLeft = symbol.getLeft(), isOnSameColumn = x === symbolX, isOnSameLine = y === symbolY, isUnder = y < symbolY, isUpper = y > symbolY || this === symbol, isLeft = x > symbolX, isRight = x < symbolX, maxX = 0, lineLength = this.getAttr("line-length"), lineWith = this.getAttr("line-width");
if (origin && "bottom" !== origin || !isOnSameColumn || !isUnder) if (origin && "right" !== origin || !isOnSameLine || !isRight) if (origin && "left" !== origin || !isOnSameLine || !isLeft) if (origin && "right" !== origin || !isOnSameColumn || !isUpper) if (origin && "right" !== origin || !isOnSameColumn || !isUnder) if (origin && "bottom" !== origin || !isLeft) if (origin && "bottom" !== origin || !isRight || !isUnder) if (origin && "bottom" !== origin || !isRight) if (origin && "right" === origin && isLeft) yOffset = 10 * Math.max(symbol.topLines.length, this.rightLines.length),
line = drawLine(this.chart, right, [ {
x: right.x + lineLength / 2,
y: right.y
}, {
x: right.x + lineLength / 2,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y
} ], text), this.rightLines.push(line), symbol.topLines.push(line), this.rightStart = !0,
symbol.topEnd = !0, maxX = right.x + lineLength / 2; else if (origin && "right" === origin && isRight) yOffset = 10 * Math.max(symbol.topLines.length, this.rightLines.length),
line = drawLine(this.chart, right, [ {
x: symbolTop.x,
y: right.y - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y - yOffset
} ], text), this.rightLines.push(line), symbol.topLines.push(line), this.rightStart = !0,
symbol.topEnd = !0, maxX = right.x + lineLength / 2; else if (origin && "bottom" === origin && isOnSameColumn && isUpper) yOffset = 10 * Math.max(symbol.topLines.length, this.bottomLines.length),
line = drawLine(this.chart, bottom, [ {
x: bottom.x,
y: bottom.y + lineLength / 2 - yOffset
}, {
x: right.x + lineLength / 2,
y: bottom.y + lineLength / 2 - yOffset
}, {
x: right.x + lineLength / 2,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y
} ], text), this.bottomLines.push(line), symbol.topLines.push(line), this.bottomStart = !0,
symbol.topEnd = !0, maxX = bottom.x + lineLength / 2; else if ("left" === origin && isOnSameColumn && isUpper) {
var diffX = left.x - lineLength / 2;
symbolLeft.x < left.x && (diffX = symbolLeft.x - lineLength / 2), yOffset = 10 * Math.max(symbol.topLines.length, this.leftLines.length),
line = drawLine(this.chart, left, [ {
x: diffX,
y: left.y - yOffset
}, {
x: diffX,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y
} ], text), this.leftLines.push(line), symbol.topLines.push(line), this.leftStart = !0,
symbol.topEnd = !0, maxX = left.x;
} else "left" === origin ? (yOffset = 10 * Math.max(symbol.topLines.length, this.leftLines.length),
line = drawLine(this.chart, left, [ {
x: symbolTop.x + (left.x - symbolTop.x) / 2,
y: left.y
}, {
x: symbolTop.x + (left.x - symbolTop.x) / 2,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y
} ], text), this.leftLines.push(line), symbol.topLines.push(line), this.leftStart = !0,
symbol.topEnd = !0, maxX = left.x) : "top" === origin && (yOffset = 10 * Math.max(symbol.topLines.length, this.topLines.length),
line = drawLine(this.chart, top, [ {
x: top.x,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y
} ], text), this.topLines.push(line), symbol.topLines.push(line), this.topStart = !0,
symbol.topEnd = !0, maxX = top.x); else yOffset = 10 * Math.max(symbol.topLines.length, this.bottomLines.length),
line = drawLine(this.chart, bottom, [ {
x: bottom.x,
y: bottom.y + lineLength / 2 - yOffset
}, {
x: bottom.x + (bottom.x - symbolTop.x) / 2,
y: bottom.y + lineLength / 2 - yOffset
}, {
x: bottom.x + (bottom.x - symbolTop.x) / 2,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y
} ], text), this.bottomLines.push(line), symbol.topLines.push(line), this.bottomStart = !0,
symbol.topEnd = !0, maxX = bottom.x + (bottom.x - symbolTop.x) / 2; else yOffset = 10 * Math.max(symbol.topLines.length, this.bottomLines.length),
line = drawLine(this.chart, bottom, [ {
x: bottom.x,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y
} ], text), this.bottomLines.push(line), symbol.topLines.push(line), this.bottomStart = !0,
symbol.topEnd = !0, maxX = bottom.x, symbolTop.x > maxX && (maxX = symbolTop.x); else yOffset = 10 * Math.max(symbol.topLines.length, this.bottomLines.length),
line = this.leftEnd && isUpper ? drawLine(this.chart, bottom, [ {
x: bottom.x,
y: bottom.y + lineLength / 2 - yOffset
}, {
x: bottom.x + (bottom.x - symbolTop.x) / 2,
y: bottom.y + lineLength / 2 - yOffset
}, {
x: bottom.x + (bottom.x - symbolTop.x) / 2,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y
} ], text) : drawLine(this.chart, bottom, [ {
x: bottom.x,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y
} ], text), this.bottomLines.push(line), symbol.topLines.push(line), this.bottomStart = !0,
symbol.topEnd = !0, maxX = bottom.x + (bottom.x - symbolTop.x) / 2; else yOffset = 10 * Math.max(symbol.topLines.length, this.rightLines.length),
line = drawLine(this.chart, right, [ {
x: right.x + lineLength / 2,
y: right.y - yOffset
}, {
x: right.x + lineLength / 2,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y
} ], text), this.rightLines.push(line), symbol.topLines.push(line), this.rightStart = !0,
symbol.topEnd = !0, maxX = right.x + lineLength / 2; else yOffset = 10 * Math.max(symbol.topLines.length, this.rightLines.length),
line = drawLine(this.chart, right, [ {
x: right.x + lineLength / 2,
y: right.y - yOffset
}, {
x: right.x + lineLength / 2,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y - lineLength / 2 - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y
} ], text), this.rightLines.push(line), symbol.topLines.push(line), this.rightStart = !0,
symbol.topEnd = !0, maxX = right.x + lineLength / 2; else 0 === symbol.rightLines.length && 0 === this.leftLines.length ? line = drawLine(this.chart, left, symbolRight, text) : (yOffset = 10 * Math.max(symbol.rightLines.length, this.leftLines.length),
line = drawLine(this.chart, right, [ {
x: right.x,
y: right.y - yOffset
}, {
x: right.x,
y: symbolRight.y - yOffset
}, {
x: symbolRight.x,
y: symbolRight.y - yOffset
}, {
x: symbolRight.x,
y: symbolRight.y
} ], text)), this.leftLines.push(line), symbol.rightLines.push(line), this.leftStart = !0,
symbol.rightEnd = !0, maxX = symbolRight.x; else 0 === symbol.leftLines.length && 0 === this.rightLines.length ? line = drawLine(this.chart, right, symbolLeft, text) : (yOffset = 10 * Math.max(symbol.leftLines.length, this.rightLines.length),
line = drawLine(this.chart, right, [ {
x: right.x,
y: right.y - yOffset
}, {
x: right.x,
y: symbolLeft.y - yOffset
}, {
x: symbolLeft.x,
y: symbolLeft.y - yOffset
}, {
x: symbolLeft.x,
y: symbolLeft.y
} ], text)), this.rightLines.push(line), symbol.leftLines.push(line), this.rightStart = !0,
symbol.leftEnd = !0, maxX = symbolLeft.x; else 0 === symbol.topLines.length && 0 === this.bottomLines.length ? line = drawLine(this.chart, bottom, symbolTop, text) : (yOffset = 10 * Math.max(symbol.topLines.length, this.bottomLines.length),
line = drawLine(this.chart, bottom, [ {
x: symbolTop.x,
y: symbolTop.y - yOffset
}, {
x: symbolTop.x,
y: symbolTop.y
} ], text)), this.bottomLines.push(line), symbol.topLines.push(line), this.bottomStart = !0,
symbol.topEnd = !0, maxX = bottom.x;
if (//update line style
this.lineStyle[symbol.key] && line && line.attr(this.lineStyle[symbol.key]), line) {
for (var l = 0, llen = this.chart.lines.length; l < llen; l++) for (var otherLine = this.chart.lines[l], ePath = otherLine.attr("path"), lPath = line.attr("path"), iP = 0, lenP = ePath.length - 1; iP < lenP; iP++) {
var newPath = [];
newPath.push([ "M", ePath[iP][1], ePath[iP][2] ]), newPath.push([ "L", ePath[iP + 1][1], ePath[iP + 1][2] ]);
for (var line1_from_x = newPath[0][1], line1_from_y = newPath[0][2], line1_to_x = newPath[1][1], line1_to_y = newPath[1][2], lP = 0, lenlP = lPath.length - 1; lP < lenlP; lP++) {
var newLinePath = [];
newLinePath.push([ "M", lPath[lP][1], lPath[lP][2] ]), newLinePath.push([ "L", lPath[lP + 1][1], lPath[lP + 1][2] ]);
var line2_from_x = newLinePath[0][1], line2_from_y = newLinePath[0][2], line2_to_x = newLinePath[1][1], line2_to_y = newLinePath[1][2], res = checkLineIntersection(line1_from_x, line1_from_y, line1_to_x, line1_to_y, line2_from_x, line2_from_y, line2_to_x, line2_to_y);
if (res.onLine1 && res.onLine2) {
var newSegment;
line2_from_y === line2_to_y ? line2_from_x > line2_to_x ? (newSegment = [ "L", res.x + 2 * lineWith, line2_from_y ],
lPath.splice(lP + 1, 0, newSegment), newSegment = [ "C", res.x + 2 * lineWith, line2_from_y, res.x, line2_from_y - 4 * lineWith, res.x - 2 * lineWith, line2_from_y ],
lPath.splice(lP + 2, 0, newSegment), line.attr("path", lPath)) : (newSegment = [ "L", res.x - 2 * lineWith, line2_from_y ],
lPath.splice(lP + 1, 0, newSegment), newSegment = [ "C", res.x - 2 * lineWith, line2_from_y, res.x, line2_from_y - 4 * lineWith, res.x + 2 * lineWith, line2_from_y ],
lPath.splice(lP + 2, 0, newSegment), line.attr("path", lPath)) : line2_from_y > line2_to_y ? (newSegment = [ "L", line2_from_x, res.y + 2 * lineWith ],
lPath.splice(lP + 1, 0, newSegment), newSegment = [ "C", line2_from_x, res.y + 2 * lineWith, line2_from_x + 4 * lineWith, res.y, line2_from_x, res.y - 2 * lineWith ],
lPath.splice(lP + 2, 0, newSegment), line.attr("path", lPath)) : (newSegment = [ "L", line2_from_x, res.y - 2 * lineWith ],
lPath.splice(lP + 1, 0, newSegment), newSegment = [ "C", line2_from_x, res.y - 2 * lineWith, line2_from_x + 4 * lineWith, res.y, line2_from_x, res.y + 2 * lineWith ],
lPath.splice(lP + 2, 0, newSegment), line.attr("path", lPath)), lP += 2;
}
}
}
this.chart.lines.push(line), (void 0 === this.chart.minXFromSymbols || this.chart.minXFromSymbols > left.x) && (this.chart.minXFromSymbols = left.x);
}
(!this.chart.maxXFromLine || this.chart.maxXFromLine && maxX > this.chart.maxXFromLine) && (this.chart.maxXFromLine = maxX);
}, module.exports = Symbol;
}, /* 3 */
/*!************************************!*\
!*** ./src/flowchart.functions.js ***!
\************************************/
/***/
function(module, exports) {
function drawPath(chart, location, points) {
var i, len, path = "M{0},{1}";
for (i = 2, len = 2 * points.length + 2; i < len; i += 2) path += " L{" + i + "},{" + (i + 1) + "}";
var pathValues = [ location.x, location.y ];
for (i = 0, len = points.length; i < len; i++) pathValues.push(points[i].x), pathValues.push(points[i].y);
var symbol = chart.paper.path(path, pathValues);
symbol.attr("stroke", chart.options["element-color"]), symbol.attr("stroke-width", chart.options["line-width"]);
var font = chart.options.font, fontF = chart.options["font-family"], fontW = chart.options["font-weight"];
return font && symbol.attr({
font: font
}), fontF && symbol.attr({
"font-family": fontF
}), fontW && symbol.attr({
"font-weight": fontW
}), symbol;
}
function drawLine(chart, from, to, text) {
var i, len;
"[object Array]" !== Object.prototype.toString.call(to) && (to = [ to ]);
var path = "M{0},{1}";
for (i = 2, len = 2 * to.length + 2; i < len; i += 2) path += " L{" + i + "},{" + (i + 1) + "}";
var pathValues = [ from.x, from.y ];
for (i = 0, len = to.length; i < len; i++) pathValues.push(to[i].x), pathValues.push(to[i].y);
var line = chart.paper.path(path, pathValues);
line.attr({
stroke: chart.options["line-color"],
"stroke-width": chart.options["line-width"],
"arrow-end": chart.options["arrow-end"]
});
var font = chart.options.font, fontF = chart.options["font-family"], fontW = chart.options["font-weight"];
if (font && line.attr({
font: font
}), fontF && line.attr({
"font-family": fontF
}), fontW && line.attr({
"font-weight": fontW
}), text) {
var centerText = !1, textPath = chart.paper.text(0, 0, text), textAnchor = "start", isHorizontal = !1, firstTo = to[0];
from.y === firstTo.y && (isHorizontal = !0);
var x = 0, y = 0;
centerText ? (x = from.x > firstTo.x ? from.x - (from.x - firstTo.x) / 2 : firstTo.x - (firstTo.x - from.x) / 2,
y = from.y > firstTo.y ? from.y - (from.y - firstTo.y) / 2 : firstTo.y - (firstTo.y - from.y) / 2,
isHorizontal ? (x -= textPath.getBBox().width / 2, y -= chart.options["text-margin"]) : (x += chart.options["text-margin"],
y -= textPath.getBBox().height / 2)) : (x = from.x, y = from.y, isHorizontal ? (from.x > firstTo.x ? (x -= chart.options["text-margin"] / 2,
textAnchor = "end") : x += chart.options["text-margin"] / 2, y -= chart.options["text-margin"]) : (x += chart.options["text-margin"] / 2,
y += chart.options["text-margin"], from.y > firstTo.y && (y -= 2 * chart.options["text-margin"]))),
textPath.attr({
"text-anchor": textAnchor,
"font-size": chart.options["font-size"],
fill: chart.options["font-color"],
x: x,
y: y
}), font && textPath.attr({
font: font
}), fontF && textPath.attr({
"font-family": fontF
}), fontW && textPath.attr({
"font-weight": fontW
});
}
return line;
}
function checkLineIntersection(line1StartX, line1StartY, line1EndX, line1EndY, line2StartX, line2StartY, line2EndX, line2EndY) {
// if the lines intersect, the result contains the x and y of the intersection (treating the lines as infinite) and booleans for whether line segment 1 or line segment 2 contain the point
var denominator, a, b, numerator1, numerator2, result = {
x: null,
y: null,
onLine1: !1,
onLine2: !1
};
// if we cast these lines infinitely in both directions, they intersect here:
/*
// it is worth noting that this should be the same as:
x = line2StartX + (b * (line2EndX - line2StartX));
y = line2StartX + (b * (line2EndY - line2StartY));
*/
// if line1 is a segment and line2 is infinite, they intersect if:
// if line2 is a segment and line1 is infinite, they intersect if:
return denominator = (line2EndY - line2StartY) * (line1EndX - line1StartX) - (line2EndX - line2StartX) * (line1EndY - line1StartY),
0 === denominator ? result : (a = line1StartY - line2StartY, b = line1StartX - line2StartX,
numerator1 = (line2EndX - line2StartX) * a - (line2EndY - line2StartY) * b, numerator2 = (line1EndX - line1StartX) * a - (line1EndY - line1StartY) * b,
a = numerator1 / denominator, b = numerator2 / denominator, result.x = line1StartX + a * (line1EndX - line1StartX),
result.y = line1StartY + a * (line1EndY - line1StartY), a > 0 && a < 1 && (result.onLine1 = !0),
b > 0 && b < 1 && (result.onLine2 = !0), result);
}
module.exports = {
drawPath: drawPath,
drawLine: drawLine,
checkLineIntersection: checkLineIntersection
};
}, /* 4 */
/*!********************************!*\
!*** ./src/flowchart.parse.js ***!
\********************************/
/***/
function(module, exports, __webpack_require__) {
function parse(input) {
function getStyle(s) {
var startIndex = s.indexOf("(") + 1, endIndex = s.indexOf(")");
return startIndex >= 0 && endIndex >= 0 ? s.substring(startIndex, endIndex) : "{}";
}
function getSymbValue(s) {
var startIndex = s.indexOf("(") + 1, endIndex = s.indexOf(")");
return startIndex >= 0 && endIndex >= 0 ? s.substring(startIndex, endIndex) : "";
}
function getSymbol(s) {
var startIndex = s.indexOf("(") + 1, endIndex = s.indexOf(")");
return startIndex >= 0 && endIndex >= 0 ? chart.symbols[s.substring(0, startIndex - 1)] : chart.symbols[s];
}
function getNextPath(s) {
var next = "next", startIndex = s.indexOf("(") + 1, endIndex = s.indexOf(")");
return startIndex >= 0 && endIndex >= 0 && (next = flowSymb.substring(startIndex, endIndex),
next.indexOf(",") < 0 && "yes" !== next && "no" !== next && (next = "next, " + next)),
next;
}
function getAnnotation(s) {
var startIndex = s.indexOf("(") + 1, endIndex = s.indexOf(")"), tmp = s.substring(startIndex, endIndex);
tmp.indexOf(",") > 0 && (tmp = tmp.substring(0, tmp.indexOf(",")));
var tmp_split = tmp.split("@");
if (tmp_split.length > 1) return startIndex >= 0 && endIndex >= 0 ? tmp_split[1] : "";
}
input = input || "", input = input.trim();
for (var chart = {
symbols: {},
start: null,
drawSVG: function(container, options) {
function getDisplaySymbol(s) {
if (dispSymbols[s.key]) return dispSymbols[s.key];
switch (s.symbolType) {
case "start":
dispSymbols[s.key] = new Start(diagram, s);
break;
case "end":
dispSymbols[s.key] = new End(diagram, s);
break;
case "operation":
dispSymbols[s.key] = new Operation(diagram, s);
break;
case "inputoutput":
dispSymbols[s.key] = new InputOutput(diagram, s);
break;
case "input":
dispSymbols[s.key] = new Input(diagram, s);
//tds
break;
case "output":
dispSymbols[s.key] = new Output(diagram, s);
//tds
break;
case "subroutine":
dispSymbols[s.key] = new Subroutine(diagram, s);
break;
case "condition":
dispSymbols[s.key] = new Condition(diagram, s);
break;
case "parallel":
dispSymbols[s.key] = new Parallel(diagram, s);
break;
default:
return new Error("Wrong symbol type!");
}
return dispSymbols[s.key];
}
var self = this;
this.diagram && this.diagram.clean();
var diagram = new FlowChart(container, options);
this.diagram = diagram;
var dispSymbols = {};
!function constructChart(s, prevDisp, prev) {
var dispSymb = getDisplaySymbol(s);
return self.start === s ? diagram.startWith(dispSymb) : prevDisp && prev && !prevDisp.pathOk && (prevDisp instanceof Condition ? (prev.yes === s && prevDisp.yes(dispSymb),
prev.no === s && prevDisp.no(dispSymb)) : prevDisp instanceof Parallel ? (prev.path1 === s && prevDisp.path1(dispSymb),
prev.path2 === s && prevDisp.path2(dispSymb), prev.path3 === s && prevDisp.path3(dispSymb)) : prevDisp.then(dispSymb)),
dispSymb.pathOk ? dispSymb : (dispSymb instanceof Condition ? (s.yes && constructChart(s.yes, dispSymb, s),
s.no && constructChart(s.no, dispSymb, s)) : dispSymb instanceof Parallel ? (s.path1 && constructChart(s.path1, dispSymb, s),
s.path2 && constructChart(s.path2, dispSymb, s), s.path3 && constructChart(s.path3, dispSymb, s)) : s.next && constructChart(s.next, dispSymb, s),
dispSymb);
}(this.start), diagram.render();
},
clean: function() {
this.diagram.clean();
},
options: function() {
return this.diagram.options;
}
}, lines = [], prevBreak = 0, i0 = 1, i0len = input.length; i0 < i0len; i0++) if ("\n" === input[i0] && "\\" !== input[i0 - 1]) {
var line0 = input.substring(prevBreak, i0);
prevBreak = i0 + 1, lines.push(line0.replace(/\\\n/g, "\n"));
}
prevBreak < input.length && lines.push(input.substr(prevBreak));
for (var l = 1, len = lines.length; l < len; ) {
var currentLine = lines[l];
currentLine.indexOf("->") < 0 && currentLine.indexOf("=>") < 0 && currentLine.indexOf("@>") < 0 ? (lines[l - 1] += "\n" + currentLine,
lines.splice(l, 1), len--) : l++;
}
for (;lines.length > 0; ) {
var line = lines.splice(0, 1)[0].trim();
if (line.indexOf("=>") >= 0) {
// definition
var parts = line.split("=>"), symbol = {
key: parts[0].replace(/\(.*\)/, ""),
symbolType: parts[1],
text: null,
link: null,
target: null,
flowstate: null,
function: null,
lineStyle: {},
params: {}
}, params = parts[0].match(/\((.*)\)/);
if (params && params.length > 1) for (var entries = params[1].split(","), i = 0; i < entries.length; i++) {
var entry = entries[i].split("=");
2 == entry.length && (symbol.params[entry[0]] = entry[1]);
}
var sub;
/* adding support for links */
if (symbol.symbolType.indexOf(": ") >= 0 && (sub = symbol.symbolType.split(": "),
symbol.symbolType = sub.shift(), symbol.text = sub.join(": ")), symbol.text && symbol.text.indexOf(":$") >= 0 ? (sub = symbol.text.split(":$"),
symbol.text = sub.shift(), symbol.function = sub.join(":$")) : symbol.symbolType.indexOf(":$") >= 0 ? (sub = symbol.symbolType.split(":$"),
symbol.symbolType = sub.shift(), symbol.function = sub.join(":$")) : symbol.text && symbol.text.indexOf(":>") >= 0 ? (sub = symbol.text.split(":>"),
symbol.text = sub.shift(), symbol.link = sub.join(":>")) : symbol.symbolType.indexOf(":>") >= 0 && (sub = symbol.symbolType.split(":>"),
symbol.symbolType = sub.shift(), symbol.link = sub.join(":>")), symbol.symbolType.indexOf("\n") >= 0 && (symbol.symbolType = symbol.symbolType.split("\n")[0]),
symbol.link) {
var startIndex = symbol.link.indexOf("[") + 1, endIndex = symbol.link.indexOf("]");
startIndex >= 0 && endIndex >= 0 && (symbol.target = symbol.link.substring(startIndex, endIndex),
symbol.link = symbol.link.substring(0, startIndex - 1));
}
/* end of link support */
/* adding support for flowstates */
if (symbol.text && symbol.text.indexOf("|") >= 0) {
var txtAndState = symbol.text.split("|");
symbol.flowstate = txtAndState.pop().trim(), symbol.text = txtAndState.join("|");
}
/* end of flowstate support */
chart.symbols[symbol.key] = symbol;
} else if (line.indexOf("->") >= 0) {
var ann = getAnnotation(line);
ann && (line = line.replace("@" + ann, ""));
for (var flowSymbols = line.split("->"), iS = 0, lenS = flowSymbols.length; iS < lenS; iS++) {
var flowSymb = flowSymbols[iS], symbVal = getSymbValue(flowSymb);
"true" !== symbVal && "false" !== symbVal || (// map true or false to yes or no respectively
flowSymb = flowSymb.replace("true", "yes"), flowSymb = flowSymb.replace("false", "no"));
var next = getNextPath(flowSymb), realSymb = getSymbol(flowSymb), direction = null;
if (next.indexOf(",") >= 0) {
var condOpt = next.split(",");
next = condOpt[0], direction = condOpt[1].trim();
}
if (ann && ("condition" === realSymb.symbolType ? "yes" === next || "true" === next ? realSymb.yes_annotation = ann : realSymb.no_annotation = ann : "parallel" === realSymb.symbolType && ("path1" === next ? realSymb.path1_annotation = ann : "path2" === next ? realSymb.path2_annotation = ann : "path3" === next && (realSymb.path3_annotation = ann)),
ann = null), chart.start || (chart.start = realSymb), iS + 1 < lenS) {
var nextSymb = flowSymbols[iS + 1];
realSymb[next] = getSymbol(nextSymb), realSymb["direction_" + next] = direction,
direction = null;
}
}
} else if (line.indexOf("@>") >= 0) for (var lineStyleSymbols = line.split("@>"), iSS = 0, lenSS = lineStyleSymbols.length; iSS < lenSS; iSS++) if (iSS + 1 !== lenSS) {
var curSymb = getSymbol(lineStyleSymbols[iSS]), nextSymbol = getSymbol(lineStyleSymbols[iSS + 1]);
curSymb.lineStyle[nextSymbol.key] = JSON.parse(getStyle(lineStyleSymbols[iSS + 1]));
}
}
return chart;
}
var FlowChart = __webpack_require__(/*! ./flowchart.chart */ 7), Start = __webpack_require__(/*! ./flowchart.symbol.start */ 15), End = __webpack_require__(/*! ./flowchart.symbol.end */ 10), Operation = __webpack_require__(/*! ./flowchart.symbol.operation */ 13), InputOutput = __webpack_require__(/*! ./flowchart.symbol.inputoutput */ 12), Input = __webpack_require__(/*! ./flowchart.symbol.input */ 11), Output = __webpack_require__(/*! ./flowchart.symbol.output */ 14), Subroutine = __webpack_require__(/*! ./flowchart.symbol.subroutine */ 16), Condition = __webpack_require__(/*! ./flowchart.symbol.condition */ 5), Parallel = __webpack_require__(/*! ./flowchart.symbol.parallel */ 6);
module.exports = parse;
}, /* 5 */
/*!*******************************************!*\
!*** ./src/flowchart.symbol.condition.js ***!
\*******************************************/
/***/
function(module, exports, __webpack_require__) {
function Condition(chart, options) {
options = options || {}, Symbol.call(this, chart, options), this.yes_annotation = options.yes_annotation,
this.no_annotation = options.no_annotation, this.textMargin = this.getAttr("text-margin"),
this.yes_direction = options.direction_yes, this.no_direction = options.direction_no,
this.no_direction || "right" !== this.yes_direction ? this.yes_direction || "bottom" !== this.no_direction || (this.yes_direction = "right") : this.no_direction = "bottom",
this.yes_direction = this.yes_direction || "bottom", this.no_direction = this.no_direction || "right",
this.text.attr({
x: 2 * this.textMargin
});
var width = this.text.getBBox().width + 3 * this.textMargin;
width += width / 2;
var height = this.text.getBBox().height + 2 * this.textMargin;
height += height / 2, height = Math.max(.5 * width, height);
var startX = width / 4, startY = height / 4;
this.text.attr({
x: startX + this.textMargin / 2
});
var start = {
x: startX,
y: startY
}, points = [ {
x: startX - width / 4,
y: startY + height / 4
}, {
x: startX - width / 4 + width / 2,
y: startY + height / 4 + height / 2
}, {
x: startX - width / 4 + width,
y: startY + height / 4
}, {
x: startX - width / 4 + width / 2,
y: startY + height / 4 - height / 2
}, {
x: startX - width / 4,
y: startY + height / 4
} ], symbol = drawPath(chart, start, points);
symbol.attr({
stroke: this.getAttr("element-color"),
"stroke-width": this.getAttr("line-width"),
fill: this.getAttr("fill")
}), options.link && symbol.attr("href", options.link), options.target && symbol.attr("target", options.target),
options.key && (symbol.node.id = options.key), symbol.node.setAttribute("class", this.getAttr("class")),
this.text.attr({
y: symbol.getBBox().height / 2
}), this.group.push(symbol), symbol.insertBefore(this.text), this.symbol = symbol,
this.initialize();
}
var Symbol = __webpack_require__(/*! ./flowchart.symbol */ 2), inherits = __webpack_require__(/*! ./flowchart.helpers */ 1).inherits, drawAPI = __webpack_require__(/*! ./flowchart.functions */ 3), drawPath = drawAPI.drawPath;
inherits(Condition, Symbol), Condition.prototype.render = function() {
var self = this;
this.yes_direction && (this[this.yes_direction + "_symbol"] = this.yes_symbol),
this.no_direction && (this[this.no_direction + "_symbol"] = this.no_symbol);
var lineLength = this.getAttr("line-length");
if (this.bottom_symbol) {
var bottomPoint = this.getBottom();
this.bottom_symbol.isPositioned || (this.bottom_symbol.shiftY(this.getY() + this.height + lineLength),
this.bottom_symbol.setX(bottomPoint.x - this.bottom_symbol.width / 2), this.bottom_symbol.isPositioned = !0,
this.bottom_symbol.render());
}
if (this.right_symbol) {
var rightPoint = this.getRight();
this.right_symbol.isPositioned || (this.right_symbol.setY(rightPoint.y - this.right_symbol.height / 2),
this.right_symbol.shiftX(this.group.getBBox().x + this.width + lineLength), function shift() {
for (var symb, hasSymbolUnder = !1, i = 0, len = self.chart.symbols.length; i < len; i++) if (symb = self.chart.symbols[i],
!self.params["align-next"] || "no" !== self.params["align-next"]) {
var diff = Math.abs(symb.getCenter().x - self.right_symbol.getCenter().x);
if (symb.getCenter().y > self.right_symbol.getCenter().y && diff <= self.right_symbol.width / 2) {
hasSymbolUnder = !0;
break;
}
}
if (hasSymbolUnder) {
if ("end" === self.right_symbol.symbolType) return;
self.right_symbol.setX(symb.getX() + symb.width + lineLength), shift();
}
}(), this.right_symbol.isPositioned = !0, this.right_symbol.render());
}
if (this.left_symbol) {
var leftPoint = this.getLeft();
this.left_symbol.isPositioned || (this.left_symbol.setY(leftPoint.y - this.left_symbol.height / 2),
this.left_symbol.shiftX(-(this.group.getBBox().x + this.width + lineLength)), function shift() {
for (var symb, hasSymbolUnder = !1, i = 0, len = self.chart.symbols.length; i < len; i++) if (symb = self.chart.symbols[i],
!self.params["align-next"] || "no" !== self.params["align-next"]) {
var diff = Math.abs(symb.getCenter().x - self.left_symbol.getCenter().x);
if (symb.getCenter().y > self.left_symbol.getCenter().y && diff <= self.left_symbol.width / 2) {
hasSymbolUnder = !0;
break;
}
}
if (hasSymbolUnder) {
if ("end" === self.left_symbol.symbolType) return;
self.left_symbol.setX(symb.getX() + symb.width + lineLength), shift();
}
}(), this.left_symbol.isPositioned = !0, this.left_symbol.render());
}
}, Condition.prototype.renderLines = function() {
this.yes_symbol && this.drawLineTo(this.yes_symbol, this.yes_annotation ? this.yes_annotation : this.getAttr("yes-text"), this.yes_direction),
this.no_symbol && this.drawLineTo(this.no_symbol, this.no_annotation ? this.no_annotation : this.getAttr("no-text"), this.no_direction);
}, module.exports = Condition;
}, /* 6 */
/*!******************************************!*\
!*** ./src/flowchart.symbol.parallel.js ***!
\******************************************/
/***/
function(module, exports, __webpack_require__) {
function Parallel(chart, options) {
var symbol = chart.paper.rect(0, 0, 0, 0);
options = options || {}, Symbol.call(this, chart, options, symbol), this.path1_annotation = options.path1_annotation || "",
this.path2_annotation = options.path2_annotation || "", this.path3_annotation = options.path3_annotation || "",
this.textMargin = this.getAttr("text-margin"), this.path1_direction = "bottom",
this.path2_direction = "right", this.path3_direction = "top", this.params = options.params,
"path1" === options.direction_next && !options[options.direction_next] && options.next && (options[options.direction_next] = options.next),
"path2" === options.direction_next && !options[options.direction_next] && options.next && (options[options.direction_next] = options.next),
"path3" === options.direction_next && !options[options.direction_next] && options.next && (options[options.direction_next] = options.next),
options.path1 && options.direction_path1 && options.path2 && !options.direction_path2 && options.path3 && !options.direction_path3 ? "right" === options.direction_path1 ? (this.path2_direction = "bottom",
this.path1_direction = "right", this.path3_direction = "top") : "top" === options.direction_path1 ? (this.path2_direction = "right",
this.path1_direction = "top", this.path3_direction = "bottom") : "left" === options.direction_path1 ? (this.path2_direction = "right",
this.path1_direction = "left", this.path3_direction = "bottom") : (this.path2_direction = "right",
this.path1_direction = "bottom", this.path3_direction = "top") : options.path1 && !options.direction_path1 && options.path2 && options.direction_path2 && options.path3 && !options.direction_path3 ? "right" === options.direction_path2 ? (this.path1_direction = "bottom",
this.path2_direction = "right", this.path3_direction = "top") : "left" === options.direction_path2 ? (this.path1_direction = "bottom",
this.path2_direction = "left", this.path3_direction = "right") : (this.path1_direction = "right",
this.path2_direction = "bottom", this.path3_direction = "top") : options.path1 && !options.direction_path1 && options.path2 && !options.direction_path2 && options.path3 && options.direction_path3 ? "right" === options.direction_path2 ? (this.path1_direction = "bottom",
this.path2_direction = "top", this.path3_direction = "right") : "left" === options.direction_path2 ? (this.path1_direction = "bottom",
this.path2_direction = "right", this.path3_direction = "left") : (this.path1_direction = "right",
this.path2_direction = "bottom", this.path3_direction = "top") : (this.path1_direction = options.direction_path1,
this.path2_direction = options.direction_path2, this.path3_direction = options.direction_path3),
this.path1_direction = this.path1_direction || "bottom", this.path2_direction = this.path2_direction || "right",
this.path3_direction = this.path3_direction || "top", this.initialize();
}
var Symbol = __webpack_require__(/*! ./flowchart.symbol */ 2), inherits = __webpack_require__(/*! ./flowchart.helpers */ 1).inherits;
inherits(Parallel, Symbol), Parallel.prototype.render = function() {
this.path1_direction && (this[this.path1_direction + "_symbol"] = this.path1_symbol),
this.path2_direction && (this[this.path2_direction + "_symbol"] = this.path2_symbol),
this.path3_direction && (this[this.path3_direction + "_symbol"] = this.path3_symbol);
var lineLength = this.getAttr("line-length");
if (this.bottom_symbol) {
var bottomPoint = this.getBottom();
this.bottom_symbol.isPositioned || (this.bottom_symbol.shiftY(this.getY() + this.height + lineLength),
this.bottom_symbol.setX(bottomPoint.x - this.bottom_symbol.width / 2), this.bottom_symbol.isPositioned = !0,
this.bottom_symbol.render());
}
if (this.top_symbol) {
var topPoint = this.getTop();
this.top_symbol.isPositioned || (this.top_symbol.shiftY(this.getY() - this.top_symbol.height - lineLength),
this.top_symbol.setX(topPoint.x + this.top_symbol.width), this.top_symbol.isPositioned = !0,
this.top_symbol.render());
}
var self = this;
if (this.left_symbol) {
var leftPoint = this.getLeft();
this.left_symbol.isPositioned || (this.left_symbol.setY(leftPoint.y - this.left_symbol.height / 2),
this.left_symbol.shiftX(-(this.group.getBBox().x + this.width + lineLength)), function shift() {
for (var symb, hasSymbolUnder = !1, i = 0, len = self.chart.symbols.length; i < len; i++) if (symb = self.chart.symbols[i],
!self.params["align-next"] || "no" !== self.params["align-next"]) {
var diff = Math.abs(symb.getCenter().x - self.left_symbol.getCenter().x);
if (symb.getCenter().y > self.left_symbol.getCenter().y && diff <= self.left_symbol.width / 2) {
hasSymbolUnder = !0;
break;
}
}
if (hasSymbolUnder) {
if ("end" === self.left_symbol.symbolType) return;
self.left_symbol.setX(symb.getX() + symb.width + lineLength), shift();
}
}(), this.left_symbol.isPositioned = !0, this.left_symbol.render());
}
if (this.right_symbol) {
var rightPoint = this.getRight();
this.right_symbol.isPositioned || (this.right_symbol.setY(rightPoint.y - this.right_symbol.height / 2),
this.right_symbol.shiftX(this.group.getBBox().x + this.width + lineLength), function shift() {
for (var symb, hasSymbolUnder = !1, i = 0, len = self.chart.symbols.length; i < len; i++) if (symb = self.chart.symbols[i],
!self.params["align-next"] || "no" !== self.params["align-next"]) {
var diff = Math.abs(symb.getCenter().x - self.right_symbol.getCenter().x);
if (symb.getCenter().y > self.right_symbol.getCenter().y && diff <= self.right_symbol.width / 2) {
hasSymbolUnder = !0;
break;
}
}
if (hasSymbolUnder) {
if ("end" === self.right_symbol.symbolType) return;
self.right_symbol.setX(symb.getX() + symb.width + lineLength), shift();
}
}(), this.right_symbol.isPositioned = !0, this.right_symbol.render());
}
}, Parallel.prototype.renderLines = function() {
this.path1_symbol && this.drawLineTo(this.path1_symbol, this.path1_annotation, this.path1_direction),
this.path2_symbol && this.drawLineTo(this.path2_symbol, this.path2_annotation, this.path2_direction),
this.path3_symbol && this.drawLineTo(this.path3_symbol, this.path3_annotation, this.path3_direction);
}, module.exports = Parallel;
}, /* 7 */
/*!********************************!*\
!*** ./src/flowchart.chart.js ***!
\********************************/
/***/
function(module, exports, __webpack_require__) {
function FlowChart(container, options) {
options = options || {}, this.paper = new Raphael(container), this.options = defaults(options, defaultOptions),
this.symbols = [], this.lines = [], this.start = null;
}
var Raphael = __webpack_require__(/*! raphael */ 18), defaults = __webpack_require__(/*! ./flowchart.helpers */ 1).defaults, defaultOptions = __webpack_require__(/*! ./flowchart.defaults */ 8), Condition = __webpack_require__(/*! ./flowchart.symbol.condition */ 5), Parallel = __webpack_require__(/*! ./flowchart.symbol.parallel */ 6);
FlowChart.prototype.handle = function(symbol) {
this.symbols.indexOf(symbol) <= -1 && this.symbols.push(symbol);
var flowChart = this;
return symbol instanceof Condition ? (symbol.yes = function(nextSymbol) {
return symbol.yes_symbol = nextSymbol, symbol.no_symbol && (symbol.pathOk = !0),
flowChart.handle(nextSymbol);
}, symbol.no = function(nextSymbol) {
return symbol.no_symbol = nextSymbol, symbol.yes_symbol && (symbol.pathOk = !0),
flowChart.handle(nextSymbol);
}) : symbol instanceof Parallel ? (symbol.path1 = function(nextSymbol) {
return symbol.path1_symbol = nextSymbol, symbol.path2_symbol && (symbol.pathOk = !0),
flowChart.handle(nextSymbol);
}, symbol.path2 = function(nextSymbol) {
return symbol.path2_symbol = nextSymbol, symbol.path3_symbol && (symbol.pathOk = !0),
flowChart.handle(nextSymbol);
}, symbol.path3 = function(nextSymbol) {
return symbol.path3_symbol = nextSymbol, symbol.path1_symbol && (symbol.pathOk = !0),
flowChart.handle(nextSymbol);
}) : symbol.then = function(nextSymbol) {
return symbol.next = nextSymbol, symbol.pathOk = !0, flowChart.handle(nextSymbol);
}, symbol;
}, FlowChart.prototype.startWith = function(symbol) {
return this.start = symbol, this.handle(symbol);
}, FlowChart.prototype.render = function() {
var symbol, line, maxWidth = 0, maxHeight = 0, i = 0, len = 0, maxX = 0, maxY = 0, minX = 0, minY = 0;
for (i = 0, len = this.symbols.length; i < len; i++) symbol = this.symbols[i], symbol.width > maxWidth && (maxWidth = symbol.width),
symbol.height > maxHeight && (maxHeight = symbol.height);
for (i = 0, len = this.symbols.length; i < len; i++) symbol = this.symbols[i], symbol.shiftX(this.options.x + (maxWidth - symbol.width) / 2 + this.options["line-width"]),
symbol.shiftY(this.options.y + (maxHeight - symbol.height) / 2 + this.options["line-width"]);
// for (i = 0, len = this.symbols.length; i < len; i++) {
// symbol = this.symbols[i];
// symbol.render();
// }
for (this.start.render(), i = 0, len = this.symbols.length; i < len; i++) symbol = this.symbols[i],
symbol.renderLines();
maxX = this.maxXFromLine;
var x, y;
for (i = 0, len = this.symbols.length; i < len; i++) {
symbol = this.symbols[i];
var leftX = symbol.getX();
x = leftX + symbol.width, y = symbol.getY() + symbol.height, leftX < minX && (minX = leftX),
x > maxX && (maxX = x), y > maxY && (maxY = y);
}
for (i = 0, len = this.lines.length; i < len; i++) {
line = this.lines[i].getBBox(), x = line.x, y = line.y;
var x2 = line.x2, y2 = line.y2;
x < minX && (minX = x), y < minY && (minY = y), x2 > maxX && (maxX = x2), y2 > maxY && (maxY = y2);
}
var scale = this.options.scale, lineWidth = this.options["line-width"];
this.minXFromSymbols < minX && (minX = this.minXFromSymbols), minX < 0 && (minX -= lineWidth),
minY < 0 && (minY -= lineWidth);
var width = maxX + lineWidth - minX, height = maxY + lineWidth - minY;
this.paper.setSize(width * scale, height * scale), this.paper.setViewBox(minX, minY, width, height, !0);
}, FlowChart.prototype.clean = function() {
if (this.paper) {
var paperDom = this.paper.canvas;
paperDom.parentNode && paperDom.parentNode.removeChild(paperDom);
}
}, module.exports = FlowChart;
}, /* 8 */
/*!***********************************!*\
!*** ./src/flowchart.defaults.js ***!
\***********************************/
/***/
function(module, exports) {
// defaults
module.exports = {
x: 0,
y: 0,
// 'roundness': 0,
"line-width": 3,
"line-length": 50,
"text-margin": 10,
"font-size": 14,
"font-color": "black",
// 'font': 'normal',
// 'font-family': 'calibri',
// 'font-weight': 'normal',
"line-color": "black",
"element-color": "black",
fill: "white",
"yes-text": "yes",
"no-text": "no",
"arrow-end": "block",
class: "flowchart",
scale: 1,
symbols: {
start: {},
end: {},
condition: {},
inputoutput: {},
input: {},
//tds
output: {},
//tds
operation: {},
subroutine: {},
parallel: {}
}
};
}, /* 9 */
/*!*******************************!*\
!*** ./src/flowchart.shim.js ***!
\*******************************/
/***/
function(module, exports) {
// add indexOf to non ECMA-262 standard compliant browsers
Array.prototype.indexOf || (Array.prototype.indexOf = function(searchElement) {
"use strict";
if (null === this) throw new TypeError();
var t = Object(this), len = t.length >>> 0;
if (0 === len) return -1;
var n = 0;
if (arguments.length > 0 && (n = Number(arguments[1]), n != n ? // shortcut for verifying if it's NaN
n = 0 : 0 !== n && n != 1 / 0 && n != -(1 / 0) && (n = (n > 0 || -1) * Math.floor(Math.abs(n)))),
n >= len) return -1;
for (var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0); k < len; k++) if (k in t && t[k] === searchElement) return k;
return -1;
}), // add lastIndexOf to non ECMA-262 standard compliant browsers
Array.prototype.lastIndexOf || (Array.prototype.lastIndexOf = function(searchElement) {
"use strict";
if (null === this) throw new TypeError();
var t = Object(this), len = t.length >>> 0;
if (0 === len) return -1;
var n = len;
arguments.length > 1 && (n = Number(arguments[1]), n != n ? n = 0 : 0 !== n && n != 1 / 0 && n != -(1 / 0) && (n = (n > 0 || -1) * Math.floor(Math.abs(n))));
for (var k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) if (k in t && t[k] === searchElement) return k;
return -1;
}), String.prototype.trim || (String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, "");
});
}, /* 10 */
/*!*************************************!*\
!*** ./src/flowchart.symbol.end.js ***!
\*************************************/
/***/
function(module, exports, __webpack_require__) {
function End(chart, options) {
var symbol = chart.paper.rect(0, 0, 0, 0, 20);
options = options || {}, options.text = options.text || "End", Symbol.call(this, chart, options, symbol);
}
var Symbol = __webpack_require__(/*! ./flowchart.symbol */ 2), inherits = __webpack_require__(/*! ./flowchart.helpers */ 1).inherits;
inherits(End, Symbol), module.exports = End;
}, /* 11 */
/*!***************************************!*\
!*** ./src/flowchart.symbol.input.js ***!
\***************************************/
/***/
function(module, exports, __webpack_require__) {
function Input(chart, options) {
options = options || {}, Symbol.call(this, chart, options), this.textMargin = this.getAttr("text-margin"),
this.text.attr({
x: 3 * this.textMargin
});
var width = this.text.getBBox().width + 4 * this.textMargin, height = this.text.getBBox().height + 2 * this.textMargin, startX = this.textMargin, startY = height / 2, start = {
x: startX,
y: startY
}, points = [ {
x: startX - this.textMargin + 2 * this.textMargin,
y: height
}, {
x: startX - this.textMargin + width,
y: height
}, {
x: startX - this.textMargin + width + 2 * this.textMargin,
y: 0
}, {
x: startX - this.textMargin,
y: 0
}, {
x: startX,
y: startY
} ], symbol = drawPath(chart, start, points);
symbol.attr({
stroke: this.getAttr("element-color"),
"stroke-width": this.getAttr("line-width"),
fill: this.getAttr("fill")
}), options.link && symbol.attr("href", options.link), options.target && symbol.attr("target", options.target),
options.key && (symbol.node.id = options.key), symbol.node.setAttribute("class", this.getAttr("class")),
this.text.attr({
y: symbol.getBBox().height / 2
}), this.group.push(symbol), symbol.insertBefore(this.text), this.symbol = symbol,
this.initialize();
}
var Symbol = __webpack_require__(/*! ./flowchart.symbol */ 2), inherits = __webpack_require__(/*! ./flowchart.helpers */ 1).inherits, drawAPI = __webpack_require__(/*! ./flowchart.functions */ 3), drawPath = drawAPI.drawPath;
inherits(Input, Symbol), Input.prototype.getLeft = function() {
var y = this.getY() + this.group.getBBox().height / 2, x = this.getX() + this.textMargin;
return {
x: x,
y: y
};
}, Input.prototype.getRight = function() {
var y = this.getY() + this.group.getBBox().height / 2, x = this.getX() + this.group.getBBox().width - this.textMargin;
return {
x: x,
y: y
};
}, module.exports = Input;
}, /* 12 */
/*!*********************************************!*\
!*** ./src/flowchart.symbol.inputoutput.js ***!
\*********************************************/
/***/
function(module, exports, __webpack_require__) {
function InputOutput(chart, options) {
options = options || {}, Symbol.call(this, chart, options), this.textMargin = this.getAttr("text-margin"),
this.text.attr({
x: 3 * this.textMargin
});
var width = this.text.getBBox().width + 4 * this.textMargin, height = this.text.getBBox().height + 2 * this.textMargin, startX = this.textMargin, startY = height / 2, start = {
x: startX,
y: startY
}, points = [ {
x: startX - this.textMargin,
y: height
}, {
x: startX - this.textMargin + width,
y: height
}, {
x: startX - this.textMargin + width + 2 * this.textMargin,
y: 0
}, {
x: startX - this.textMargin + 2 * this.textMargin,
y: 0
}, {
x: startX,
y: startY
} ], symbol = drawPath(chart, start, points);
symbol.attr({
stroke: this.getAttr("element-color"),
"stroke-width": this.getAttr("line-width"),
fill: this.getAttr("fill")
}), options.link && symbol.attr("href", options.link), options.target && symbol.attr("target", options.target),
options.key && (symbol.node.id = options.key), symbol.node.setAttribute("class", this.getAttr("class")),
this.text.attr({
y: symbol.getBBox().height / 2
}), this.group.push(symbol), symbol.insertBefore(this.text), this.symbol = symbol,
this.initialize();
}
var Symbol = __webpack_require__(/*! ./flowchart.symbol */ 2), inherits = __webpack_require__(/*! ./flowchart.helpers */ 1).inherits, drawAPI = __webpack_require__(/*! ./flowchart.functions */ 3), drawPath = drawAPI.drawPath;
inherits(InputOutput, Symbol), InputOutput.prototype.getLeft = function() {
var y = this.getY() + this.group.getBBox().height / 2, x = this.getX() + this.textMargin;
return {
x: x,
y: y
};
}, InputOutput.prototype.getRight = function() {
var y = this.getY() + this.group.getBBox().height / 2, x = this.getX() + this.group.getBBox().width - this.textMargin;
return {
x: x,
y: y
};
}, module.exports = InputOutput;
}, /* 13 */
/*!*******************************************!*\
!*** ./src/flowchart.symbol.operation.js ***!
\*******************************************/
/***/
function(module, exports, __webpack_require__) {
function Operation(chart, options) {
var symbol = chart.paper.rect(0, 0, 0, 0);
options = options || {}, Symbol.call(this, chart, options, symbol);
}
var Symbol = __webpack_require__(/*! ./flowchart.symbol */ 2), inherits = __webpack_require__(/*! ./flowchart.helpers */ 1).inherits;
inherits(Operation, Symbol), module.exports = Operation;
}, /* 14 */
/*!****************************************!*\
!*** ./src/flowchart.symbol.output.js ***!
\****************************************/
/***/
function(module, exports, __webpack_require__) {
function Output(chart, options) {
options = options || {}, Symbol.call(this, chart, options), this.textMargin = this.getAttr("text-margin"),
this.text.attr({
x: 3 * this.textMargin
});
var width = this.text.getBBox().width + 4 * this.textMargin, height = this.text.getBBox().height + 2 * this.textMargin, startX = this.textMargin, startY = height / 2, start = {
x: startX,
y: startY
}, points = [ {
x: startX - this.textMargin,
y: height
}, {
x: startX - this.textMargin + width + 2 * this.textMargin,
y: height
}, {
x: startX - this.textMargin + width,
y: 0
}, {
x: startX - this.textMargin + 2 * this.textMargin,
y: 0
}, {
x: startX,
y: startY
} ], symbol = drawPath(chart, start, points);
symbol.attr({
stroke: this.getAttr("element-color"),
"stroke-width": this.getAttr("line-width"),
fill: this.getAttr("fill")
}), options.link && symbol.attr("href", options.link), options.target && symbol.attr("target", options.target),
options.key && (symbol.node.id = options.key), symbol.node.setAttribute("class", this.getAttr("class")),
this.text.attr({
y: symbol.getBBox().height / 2
}), this.group.push(symbol), symbol.insertBefore(this.text), this.symbol = symbol,
this.initialize();
}
var Symbol = __webpack_require__(/*! ./flowchart.symbol */ 2), inherits = __webpack_require__(/*! ./flowchart.helpers */ 1).inherits, drawAPI = __webpack_require__(/*! ./flowchart.functions */ 3), drawPath = drawAPI.drawPath;
inherits(Output, Symbol), Output.prototype.getLeft = function() {
var y = this.getY() + this.group.getBBox().height / 2, x = this.getX() + this.textMargin;
return {
x: x,
y: y
};
}, Output.prototype.getRight = function() {
var y = this.getY() + this.group.getBBox().height / 2, x = this.getX() + this.group.getBBox().width - this.textMargin;
return {
x: x,
y: y
};
}, module.exports = Output;
}, /* 15 */
/*!***************************************!*\
!*** ./src/flowchart.symbol.start.js ***!
\***************************************/
/***/
function(module, exports, __webpack_require__) {
function Start(chart, options) {
var symbol = chart.paper.rect(0, 0, 0, 0, 20);
options = options || {}, options.text = options.text || "Start", Symbol.call(this, chart, options, symbol);
}
var Symbol = __webpack_require__(/*! ./flowchart.symbol */ 2), inherits = __webpack_require__(/*! ./flowchart.helpers */ 1).inherits;
inherits(Start, Symbol), module.exports = Start;
}, /* 16 */
/*!********************************************!*\
!*** ./src/flowchart.symbol.subroutine.js ***!
\********************************************/
/***/
function(module, exports, __webpack_require__) {
function Subroutine(chart, options) {
var symbol = chart.paper.rect(0, 0, 0, 0);
options = options || {}, Symbol.call(this, chart, options, symbol), symbol.attr({
width: this.text.getBBox().width + 4 * this.getAttr("text-margin")
}), this.text.attr({
x: 2 * this.getAttr("text-margin")
});
var innerWrap = chart.paper.rect(0, 0, 0, 0);
innerWrap.attr({
x: this.getAttr("text-margin"),
stroke: this.getAttr("element-color"),
"stroke-width": this.getAttr("line-width"),
width: this.text.getBBox().width + 2 * this.getAttr("text-margin"),
height: this.text.getBBox().height + 2 * this.getAttr("text-margin"),
fill: this.getAttr("fill")
}), options.key && (innerWrap.node.id = options.key + "i");
var font = this.getAttr("font"), fontF = this.getAttr("font-family"), fontW = this.getAttr("font-weight");
font && innerWrap.attr({
font: font
}), fontF && innerWrap.attr({
"font-family": fontF
}), fontW && innerWrap.attr({
"font-weight": fontW
}), options.link && innerWrap.attr("href", options.link), options.target && innerWrap.attr("target", options.target),
this.group.push(innerWrap), innerWrap.insertBefore(this.text), this.initialize();
}
var Symbol = __webpack_require__(/*! ./flowchart.symbol */ 2), inherits = __webpack_require__(/*! ./flowchart.helpers */ 1).inherits;
inherits(Subroutine, Symbol), module.exports = Subroutine;
}, /* 17 */
/*!******************************!*\
!*** ./src/jquery-plugin.js ***!
\******************************/
/***/
function(module, exports, __webpack_require__) {
if ("undefined" != typeof jQuery) {
var parse = __webpack_require__(/*! ./flowchart.parse */ 4);
!function($) {
function paramFit(needle, haystack) {
return needle == haystack || Array.isArray(haystack) && (haystack.includes(needle) || haystack.includes(Number(needle)));
}
var methods = {
init: function(options) {
return this.each(function() {
var $this = $(this);
this.chart = parse($this.text()), $this.html(""), this.chart.drawSVG(this, options);
});
},
setFlowStateByParam: function(param, paramValue, newFlowState) {
return this.each(function() {
var chart = this.chart, nextSymbolKeys = [ "next", "yes", "no", "path1", "path2", "path3" ];
for (var property in chart.symbols) if (chart.symbols.hasOwnProperty(property)) {
var symbol = chart.symbols[property], val = symbol.params[param];
if (paramFit(val, paramValue)) {
symbol.flowstate = newFlowState;
for (var nski = 0; nski < nextSymbolKeys.length; nski++) {
var nextSymbolKey = nextSymbolKeys[nski];
symbol[nextSymbolKey] && symbol[nextSymbolKey].params && symbol[nextSymbolKey].params[param] && paramFit(symbol[nextSymbolKey].params[param], paramValue) && (symbol.lineStyle[symbol[nextSymbolKey].key] = {
stroke: chart.options().flowstate[newFlowState].fill
});
}
}
}
chart.clean(), chart.drawSVG(this);
});
},
clearFlowState: function() {
return this.each(function() {
var chart = this.chart;
for (var property in chart.symbols) if (chart.symbols.hasOwnProperty(property)) {
var node = chart.symbols[property];
node.flowstate = "";
}
chart.clean(), chart.drawSVG(this);
});
}
};
$.fn.flowChart = function(methodOrOptions) {
return methods[methodOrOptions] ? methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1)) : "object" != typeof methodOrOptions && methodOrOptions ? void $.error("Method " + methodOrOptions + " does not exist on jQuery.flowChart") : methods.init.apply(this, arguments);
};
}(jQuery);
}
}, /* 18 */
/*!**************************!*\
!*** external "Raphael" ***!
\**************************/
/***/
function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_18__;
} ]);
});
//# sourceMappingURL=flowchart.js.map
================================================
FILE: releasenotes.md
================================================
### v1.18.0
- introduce input and output [#251](https://github.com/adrai/flowchart.js/pull/251)
### v1.17.1
- fix start and end roundness introduced in [#227](https://github.com/adrai/flowchart.js/pull/227)
### v1.17.0
- Styling to allow rounded corners [#227](https://github.com/adrai/flowchart.js/pull/227)
### v1.16.0
- Custom annotations for parallel [#225](https://github.com/adrai/flowchart.js/issues/225)
### v1.15.0
- Introduce types [#214](https://github.com/adrai/flowchart.js/pull/214) thanks to [Mister-Hope](https://github.com/Mister-Hope)
### v1.14.3
- Removed types introduced in [#212](https://github.com/adrai/flowchart.js/pull/212) again
### v1.14.2
- Basic types [#212](https://github.com/adrai/flowchart.js/pull/212) thanks to [DerMolly](https://github.com/DerMolly)
### v1.14.1
- Corrected condition behavior and fixed layout [#211](https://github.com/adrai/flowchart.js/pull/211) thanks to [AlexanderMisel](https://github.com/AlexanderMisel)
### v1.14.0
- Custom annotations [#209](https://github.com/adrai/flowchart.js/pull/209) thanks to [serpent-charmer](https://github.com/serpent-charmer)
### v1.13.0
- Provide low cost means of lines not colliding until they converge [#191](https://github.com/adrai/flowchart.js/pull/191) thanks to [robertleeplummerjr](https://github.com/robertleeplummerjr)
- update raphael dependency
### v1.12.3
- Cleaning error fix, Linestyle parsing cycle fix, Dynamic flowState update [#188](https://github.com/adrai/flowchart.js/pull/188) thanks to [murich](https://github.com/murich)
### v1.12.2
- shrink npm package
### v1.12.1
- Fix params bug [#173](https://github.com/adrai/flowchart.js/pull/173) thanks to [leo108](https://github.com/leo108)
### v1.12.0
- onclick function binding to chart nodes [#172](https://github.com/adrai/flowchart.js/pull/172) thanks to [ndrqu](https://github.com/ndrqu)
### v1.11.3
- try to optimize horizontal rendering for end symbols [#155](https://github.com/adrai/flowchart.js/issues/155)
### v1.11.2
- try to optimize left handling [#152](https://github.com/adrai/flowchart.js/issues/152)
### v1.11.1
- fix direction issue for condition [#151](https://github.com/adrai/flowchart.js/issues/151)
### v1.11.0
- Add parallel component [#145](https://github.com/adrai/flowchart.js/pull/145) thanks to [sudhakar-sekar](https://github.com/sudhakar-sekar)
### v1.9.0
- Add arrow-text attribute to symbols [#141](https://github.com/adrai/flowchart.js/pull/141) thanks to [josephtocci](https://github.com/josephtocci)
### v1.8.0
- Allow Conditional to support 'true' or 'false' along with 'yes' and 'no' [#128](https://github.com/adrai/flowchart.js/pull/128) thanks to [bhedge](https://github.com/bhedge)
### v1.7.0
- add parameter to disable vertical alignment of condition symbol [#115](https://github.com/adrai/flowchart.js/pull/115) thanks to [bertrandmartel](https://github.com/bertrandmartel)
- add line style flow support [#113](https://github.com/adrai/flowchart.js/pull/115) thanks to [bertrandmartel](https://github.com/bertrandmartel)
### v1.6.6
- Fix disruptive space char when parsing [#105](https://github.com/adrai/flowchart.js/pull/105)
### v1.6.5
- set proper engine version in package.json
### v1.6.4
- raphael now is an npm dependency (not the git reference anymore)
### v1.6.3
- Allow going to same symbol thanks to [nonylene](https://github.com/nonylene) [#83](https://github.com/adrai/flowchart.js/pull/83)
### v1.6.2
- Fixed not calculate viewBox and size properly thanks to [jackycute](https://github.com/jackycute) [#74](https://github.com/adrai/flowchart.js/issues/#74)
### v1.6.1
- Fixed lines are not included in the calculation of viewBox and size thanks to [jackycute](https://github.com/jackycute) [#72](https://github.com/adrai/flowchart.js/issues/#72) [#67](https://github.com/adrai/flowchart.js/issues/#67)
### v1.6.0
- changed build to use only webpack thanks to [sergeyt](https://github.com/sergeyt) [#70](https://github.com/adrai/flowchart.js/issues/70)
### v1.4.2
- optimized handling of special characters thanks to the advice of [Badhumvee](https://github.com/Badhumvee)
### v1.4.0
- Support scale option [#52](https://github.com/adrai/flowchart.js/pull/52) thanks to [hikarock](https://github.com/hikarock)
### v1.3.4
- make text better readable [#31](https://github.com/adrai/flowchart.js/issues/31)
- sorry
### v1.3.3
- make text better readable [#31](https://github.com/adrai/flowchart.js/issues/31)
### v1.3.2
- optimized a bit for left support [#26](https://github.com/adrai/flowchart.js/issues/26)
### v1.3.1
- added support for css class [#24](https://github.com/adrai/flowchart.js/pull/24)
### v1.3.0
- added support for color coding (flowstate) [#23](https://github.com/adrai/flowchart.js/pull/23) thanks to [Stwissel](https://github.com/Stwissel)
### v1.2.12
- optimized start from right [#22](https://github.com/adrai/flowchart.js/issues/22)
### v1.2.11
- Added node id to objects [#18](https://github.com/adrai/flowchart.js/pull/18) thanks to [billcavalieri](https://github.com/billcavalieri)
### v1.2.10
- fix direction changes [#15](https://github.com/adrai/flowchart.js/issues/15)
### v1.2.9
- try to optimize handle directions on other symbols too [#15](https://github.com/adrai/flowchart.js/issues/15)
- added more font options (font, font-family, font-weight)
### v1.2.8
- try to handle directions on other symbols too [#15](https://github.com/adrai/flowchart.js/issues/15)
### v1.2.7
- merge [#12](https://github.com/adrai/flowchart.js/pull/12)
- fixed subroutine
### v1.2.6
- added a maxWidth option for the chart [#10](https://github.com/adrai/flowchart.js/pull/10)
### v1.2.5
- different styles for different symbol types [#9](https://github.com/adrai/flowchart.js/issues/9)
### v1.2.4
- fixed condition jump to an other symbol on same column
### v1.2.3
- added "arrow-end" option [#6](https://github.com/adrai/flowchart.js/pull/6)
### v1.2.2
- fix flowchart parsing
### v1.2.1
- fix condition direction
### v1.2.0
- ability to specify directionality of condition branches [#3](https://github.com/adrai/flowchart.js/issues/3)
### v1.1.3
- fix for old browsers
### v1.1.2
- let lines jump
### v1.1.1
- set yes or no text to source start instead of middle
### v1.1.0
- optional link for symbols
### v1.0.0
- first release
================================================
FILE: src/flowchart.chart.js
================================================
var Raphael = require('raphael');
var defaults = require('./flowchart.helpers').defaults;
var defaultOptions = require('./flowchart.defaults');
var Condition = require('./flowchart.symbol.condition');
var Parallel = require('./flowchart.symbol.parallel');
function FlowChart(container, options) {
options = options || {};
this.paper = new Raphael(container);
this.options = defaults(options, defaultOptions);
this.symbols = [];
this.lines = [];
this.start = null;
}
FlowChart.prototype.handle = function(symbol) {
if (this.symbols.indexOf(symbol) <= -1) {
this.symbols.push(symbol);
}
var flowChart = this;
if (symbol instanceof(Condition)) {
symbol.yes = function(nextSymbol) {
symbol.yes_symbol = nextSymbol;
if(symbol.no_symbol) {
symbol.pathOk = true;
}
return flowChart.handle(nextSymbol);
};
symbol.no = function(nextSymbol) {
symbol.no_symbol = nextSymbol;
if (symbol.yes_symbol) {
symbol.pathOk = true;
}
return flowChart.handle(nextSymbol);
};
} else if (symbol instanceof(Parallel)) {
symbol.path1 = function(nextSymbol) {
symbol.path1_symbol = nextSymbol;
if (symbol.path2_symbol) {
symbol.pathOk = true;
}
return flowChart.handle(nextSymbol);
};
symbol.path2 = function(nextSymbol) {
symbol.path2_symbol = nextSymbol;
if (symbol.path3_symbol) {
symbol.pathOk = true;
}
return flowChart.handle(nextSymbol);
};
symbol.path3 = function(nextSymbol) {
symbol.path3_symbol = nextSymbol;
if (symbol.path1_symbol) {
symbol.pathOk = true;
}
return flowChart.handle(nextSymbol);
};
} else {
symbol.then = function(nextSymbol) {
symbol.next = nextSymbol;
symbol.pathOk = true;
return flowChart.handle(nextSymbol);
};
}
return symbol;
};
FlowChart.prototype.startWith = function(symbol) {
this.start = symbol;
return this.handle(symbol);
};
FlowChart.prototype.render = function() {
var maxWidth = 0,
maxHeight = 0,
i = 0,
len = 0,
maxX = 0,
maxY = 0,
minX = 0,
minY = 0,
symbol,
line;
for (i = 0, len = this.symbols.length; i < len; i++) {
symbol = this.symbols[i];
if (symbol.width > maxWidth) {
maxWidth = symbol.width;
}
if (symbol.height > maxHeight) {
maxHeight = symbol.height;
}
}
for (i = 0, len = this.symbols.length; i < len; i++) {
symbol = this.symbols[i];
symbol.shiftX(this.options.x + (maxWidth - symbol.width)/2 + this.options['line-width']);
symbol.shiftY(this.options.y + (maxHeight - symbol.height)/2 + this.options['line-width']);
}
this.start.render();
// for (i = 0, len = this.symbols.length; i < len; i++) {
// symbol = this.symbols[i];
// symbol.render();
// }
for (i = 0, len = this.symbols.length; i < len; i++) {
symbol = this.symbols[i];
symbol.renderLines();
}
maxX = this.maxXFromLine;
var x;
var y;
for (i = 0, len = this.symbols.length; i < len; i++) {
symbol = this.symbols[i];
var leftX = symbol.getX()
x = leftX + symbol.width;
y = symbol.getY() + symbol.height;
if (leftX < minX) {
minX = leftX;
}
if (x > maxX) {
maxX = x;
}
if (y > maxY) {
maxY = y;
}
}
for (i = 0, len = this.lines.length; i < len; i++) {
line = this.lines[i].getBBox();
x = line.x;
y = line.y;
var x2 = line.x2;
var y2 = line.y2;
if (x < minX) {
minX = x;
}
if (y < minY) {
minY = y;
}
if (x2 > maxX) {
maxX = x2;
}
if (y2 > maxY) {
maxY = y2;
}
}
var scale = this.options['scale'];
var lineWidth = this.options['line-width'];
if (this.minXFromSymbols < minX) minX = this.minXFromSymbols;
if (minX < 0) minX -= lineWidth;
if (minY < 0) minY -= lineWidth;
var width = maxX + lineWidth - minX;
var height = maxY + lineWidth - minY;
this.paper.setSize(width * scale, height * scale);
this.paper.setViewBox(minX, minY, width, height, true);
};
FlowChart.prototype.clean = function() {
if (this.paper) {
var paperDom = this.paper.canvas;
paperDom.parentNode && paperDom.parentNode.removeChild(paperDom);
}
};
module.exports = FlowChart;
================================================
FILE: src/flowchart.defaults.js
================================================
// defaults
module.exports = {
'x': 0,
'y': 0,
// 'roundness': 0,
'line-width': 3,
'line-length': 50,
'text-margin': 10,
'font-size': 14,
'font-color': 'black',
// 'font': 'normal',
// 'font-family': 'calibri',
// 'font-weight': 'normal',
'line-color': 'black',
'element-color': 'black',
'fill': 'white',
'yes-text': 'yes',
'no-text': 'no',
'arrow-end': 'block',
'class': 'flowchart',
'scale': 1,
'symbols': {
'start': {},
'end': {},
'condition': {},
'inputoutput': {},
'input': {}, //tds
'output': {}, //tds
'operation': {},
'subroutine': {},
'parallel': {}
} //,
// 'flowstate' : {
// 'past' : { 'fill': '#CCCCCC', 'font-size': 12},
// 'current' : {'fill': 'yellow', 'font-color': 'red', 'font-weight': 'bold'},
// 'future' : { 'fill': '#FFFF99'},
// 'invalid': {'fill': '#444444'}
// }
};
================================================
FILE: src/flowchart.functions.js
================================================
function drawPath(chart, location, points) {
var i, len;
var path = 'M{0},{1}';
for (i = 2, len = 2 * points.length + 2; i < len; i+=2) {
path += ' L{' + i + '},{' + (i + 1) + '}';
}
var pathValues = [location.x, location.y];
for (i = 0, len = points.length; i < len; i++) {
pathValues.push(points[i].x);
pathValues.push(points[i].y);
}
var symbol = chart.paper.path(path, pathValues);
symbol.attr('stroke', chart.options['element-color']);
symbol.attr('stroke-width', chart.options['line-width']);
var font = chart.options.font;
var fontF = chart.options['font-family'];
var fontW = chart.options['font-weight'];
if (font) symbol.attr({ 'font': font });
if (fontF) symbol.attr({ 'font-family': fontF });
if (fontW) symbol.attr({ 'font-weight': fontW });
return symbol;
}
function drawLine(chart, from, to, text) {
var i, len;
if (Object.prototype.toString.call(to) !== '[object Array]') {
to = [to];
}
var path = 'M{0},{1}';
for (i = 2, len = 2 * to.length + 2; i < len; i+=2) {
path += ' L{' + i + '},{' + (i + 1) + '}';
}
var pathValues = [from.x, from.y];
for (i = 0, len = to.length; i < len; i++) {
pathValues.push(to[i].x);
pathValues.push(to[i].y);
}
var line = chart.paper.path(path, pathValues);
line.attr({
stroke: chart.options['line-color'],
'stroke-width': chart.options['line-width'],
'arrow-end': chart.options['arrow-end']
});
var font = chart.options.font;
var fontF = chart.options['font-family'];
var fontW = chart.options['font-weight'];
if (font) line.attr({ 'font': font });
if (fontF) line.attr({ 'font-family': fontF });
if (fontW) line.attr({ 'font-weight': fontW });
if (text) {
var centerText = false;
var textPath = chart.paper.text(0, 0, text);
var textAnchor = 'start';
var isHorizontal = false;
var firstTo = to[0];
if (from.y === firstTo.y) {
isHorizontal = true;
}
var x = 0,
y = 0;
if (centerText) {
if (from.x > firstTo.x) {
x = from.x - (from.x - firstTo.x)/2;
} else {
x = firstTo.x - (firstTo.x - from.x)/2;
}
if (from.y > firstTo.y) {
y = from.y - (from.y - firstTo.y)/2;
} else {
y = firstTo.y - (firstTo.y - from.y)/2;
}
if (isHorizontal) {
x -= textPath.getBBox().width/2;
y -= chart.options['text-margin'];
} else {
x += chart.options['text-margin'];
y -= textPath.getBBox().height/2;
}
} else {
x = from.x;
y = from.y;
if (isHorizontal) {
if (from.x > firstTo.x) {
x -= chart.options['text-margin']/2;
textAnchor = 'end';
} else {
x += chart.options['text-margin']/2;
}
y -= chart.options['text-margin'];
} else {
x += chart.options['text-margin']/2;
y += chart.options['text-margin'];
if (from.y > firstTo.y) {
y -= chart.options['text-margin']*2;
}
}
}
textPath.attr({
'text-anchor': textAnchor,
'font-size': chart.options['font-size'],
'fill': chart.options['font-color'],
x: x,
y: y
});
if (font) textPath.attr({ 'font': font });
if (fontF) textPath.attr({ 'font-family': fontF });
if (fontW) textPath.attr({ 'font-weight': fontW });
}
return line;
}
function checkLineIntersection(line1StartX, line1StartY, line1EndX, line1EndY, line2StartX, line2StartY, line2EndX, line2EndY) {
// if the lines intersect, the result contains the x and y of the intersection (treating the lines as infinite) and booleans for whether line segment 1 or line segment 2 contain the point
var denominator, a, b, numerator1, numerator2, result = {
x: null,
y: null,
onLine1: false,
onLine2: false
};
denominator = ((line2EndY - line2StartY) * (line1EndX - line1StartX)) - ((line2EndX - line2StartX) * (line1EndY - line1StartY));
if (denominator === 0) {
return result;
}
a = line1StartY - line2StartY;
b = line1StartX - line2StartX;
numerator1 = ((line2EndX - line2StartX) * a) - ((line2EndY - line2StartY) * b);
numerator2 = ((line1EndX - line1StartX) * a) - ((line1EndY - line1StartY) * b);
a = numerator1 / denominator;
b = numerator2 / denominator;
// if we cast these lines infinitely in both directions, they intersect here:
result.x = line1StartX + (a * (line1EndX - line1StartX));
result.y = line1StartY + (a * (line1EndY - line1StartY));
/*
// it is worth noting that this should be the same as:
x = line2StartX + (b * (line2EndX - line2StartX));
y = line2StartX + (b * (line2EndY - line2StartY));
*/
// if line1 is a segment and line2 is infinite, they intersect if:
if (a > 0 && a < 1) {
result.onLine1 = true;
}
// if line2 is a segment and line1 is infinite, they intersect if:
if (b > 0 && b < 1) {
result.onLine2 = true;
}
// if line1 and line2 are segments, they intersect if both of the above are true
return result;
}
module.exports = {
drawPath: drawPath,
drawLine: drawLine,
checkLineIntersection: checkLineIntersection
};
================================================
FILE: src/flowchart.helpers.js
================================================
function _defaults(options, defaultOptions) {
if (!options || typeof options === 'function') {
return defaultOptions;
}
var merged = {};
for (var attrname in defaultOptions) {
merged[attrname] = defaultOptions[attrname];
}
for (attrname in options) {
if (options[attrname]) {
if (typeof merged[attrname] === 'object') {
merged[attrname] = _defaults(merged[attrname], options[attrname]);
} else {
merged[attrname] = options[attrname];
}
}
}
return merged;
}
function _inherits(ctor, superCtor) {
if (typeof(Object.create) === 'function') {
// implementation from standard node.js 'util' module
ctor.super_ = superCtor;
ctor.prototype = Object.create(superCtor.prototype, {
constructor: {
value: ctor,
enumerable: false,
writable: true,
configurable: true
}
});
} else {
// old school shim for old browsers
ctor.super_ = superCtor;
var TempCtor = function () {};
TempCtor.prototype = superCtor.prototype;
ctor.prototype = new TempCtor();
ctor.prototype.constructor = ctor;
}
}
// move dependent functions to a container so that
// they can be overriden easier in no jquery environment (node.js)
module.exports = {
defaults: _defaults,
inherits: _inherits
};
================================================
FILE: src/flowchart.parse.js
================================================
var FlowChart = require('./flowchart.chart');
var Start = require('./flowchart.symbol.start');
var End = require('./flowchart.symbol.end');
var Operation = require('./flowchart.symbol.operation');
var InputOutput = require('./flowchart.symbol.inputoutput');
var Input = require('./flowchart.symbol.input'); //tds
var Output = require('./flowchart.symbol.output'); //tds
var Subroutine = require('./flowchart.symbol.subroutine');
var Condition = require('./flowchart.symbol.condition');
var Parallel = require('./flowchart.symbol.parallel');
function parse(input) {
input = input || '';
input = input.trim();
var chart = {
symbols: {},
start: null,
drawSVG: function(container, options) {
var self = this;
if (this.diagram) {
this.diagram.clean();
}
var diagram = new FlowChart(container, options);
this.diagram = diagram;
var dispSymbols = {};
function getDisplaySymbol(s) {
if (dispSymbols[s.key]) {
return dispSymbols[s.key];
}
switch (s.symbolType) {
case 'start':
dispSymbols[s.key] = new Start(diagram, s);
break;
case 'end':
dispSymbols[s.key] = new End(diagram, s);
break;
case 'operation':
dispSymbols[s.key] = new Operation(diagram, s);
break;
case 'inputoutput':
dispSymbols[s.key] = new InputOutput(diagram, s);
break;
case 'input':
dispSymbols[s.key] = new Input(diagram, s); //tds
break;
case 'output':
dispSymbols[s.key] = new Output(diagram, s); //tds
break;
case 'subroutine':
dispSymbols[s.key] = new Subroutine(diagram, s);
break;
case 'condition':
dispSymbols[s.key] = new Condition(diagram, s);
break;
case 'parallel':
dispSymbols[s.key] = new Parallel(diagram, s);
break;
default:
return new Error('Wrong symbol type!');
}
return dispSymbols[s.key];
}
(function constructChart(s, prevDisp, prev) {
var dispSymb = getDisplaySymbol(s);
if (self.start === s) {
diagram.startWith(dispSymb);
} else if (prevDisp && prev && !prevDisp.pathOk) {
if (prevDisp instanceof(Condition)) {
if (prev.yes === s) {
prevDisp.yes(dispSymb);
}
if (prev.no === s) {
prevDisp.no(dispSymb);
}
} else if (prevDisp instanceof(Parallel)) {
if (prev.path1 === s) {
prevDisp.path1(dispSymb);
}
if (prev.path2 === s) {
prevDisp.path2(dispSymb);
}
if (prev.path3 === s) {
prevDisp.path3(dispSymb);
}
} else {
prevDisp.then(dispSymb);
}
}
if (dispSymb.pathOk) {
return dispSymb;
}
if (dispSymb instanceof(Condition)) {
if (s.yes) {
constructChart(s.yes, dispSymb, s);
}
if (s.no) {
constructChart(s.no, dispSymb, s);
}
} else if (dispSymb instanceof(Parallel)) {
if (s.path1) {
constructChart(s.path1, dispSymb, s);
}
if (s.path2) {
constructChart(s.path2, dispSymb, s);
}
if (s.path3) {
constructChart(s.path3, dispSymb, s);
}
} else if (s.next) {
constructChart(s.next, dispSymb, s);
}
return dispSymb;
})(this.start);
diagram.render();
},
clean: function() {
this.diagram.clean();
},
options: function() {
return this.diagram.options;
}
};
var lines = [];
var prevBreak = 0;
for (var i0 = 1, i0len = input.length; i0 < i0len; i0++) {
if(input[i0] === '\n' && input[i0 - 1] !== '\\') {
var line0 = input.substring(prevBreak, i0);
prevBreak = i0 + 1;
lines.push(line0.replace(/\\\n/g, '\n'));
}
}
if (prevBreak < input.length) {
lines.push(input.substr(prevBreak));
}
for (var l = 1, len = lines.length; l < len;) {
var currentLine = lines[l];
if (currentLine.indexOf('->') < 0 && currentLine.indexOf('=>') < 0 && currentLine.indexOf('@>') < 0) {
lines[l - 1] += '\n' + currentLine;
lines.splice(l, 1);
len--;
} else {
l++;
}
}
function getStyle(s){
var startIndex = s.indexOf('(') + 1;
var endIndex = s.indexOf(')');
if (startIndex >= 0 && endIndex >= 0) {
return s.substring(startIndex,endIndex);
}
return '{}';
}
function getSymbValue(s){
var startIndex = s.indexOf('(') + 1;
var endIndex = s.indexOf(')');
if (startIndex >= 0 && endIndex >= 0) {
return s.substring(startIndex,endIndex);
}
return '';
}
function getSymbol(s) {
var startIndex = s.indexOf('(') + 1;
var endIndex = s.indexOf(')');
if (startIndex >= 0 && endIndex >= 0) {
return chart.symbols[s.substring(0, startIndex - 1)];
}
return chart.symbols[s];
}
function getNextPath(s) {
var next = 'next';
var startIndex = s.indexOf('(') + 1;
var endIndex = s.indexOf(')');
if (startIndex >= 0 && endIndex >= 0) {
next = flowSymb.substring(startIndex, endIndex);
if (next.indexOf(',') < 0) {
if (next !== 'yes' && next !== 'no') {
next = 'next, ' + next;
}
}
}
return next;
}
function getAnnotation(s) {
var startIndex = s.indexOf("(") + 1, endIndex = s.indexOf(")");
var tmp = s.substring(startIndex, endIndex);
if(tmp.indexOf(",") > 0) { tmp = tmp.substring(0, tmp.indexOf(",")); }
var tmp_split = tmp.split("@");
if(tmp_split.length > 1)
return startIndex >= 0 && endIndex >= 0 ? tmp_split[1] : "";
}
while (lines.length > 0) {
var line = lines.splice(0, 1)[0].trim();
if (line.indexOf('=>') >= 0) {
// definition
var parts = line.split('=>');
var symbol = {
key: parts[0].replace(/\(.*\)/, ''),
symbolType: parts[1],
text: null,
link: null,
target: null,
flowstate: null,
function: null,
lineStyle: {},
params: {}
};
//parse parameters
var params = parts[0].match(/\((.*)\)/);
if (params && params.length > 1){
var entries = params[1].split(',');
for(var i = 0; i < entries.length; i++) {
var entry = entries[i].split('=');
if (entry.length == 2) {
symbol.params[entry[0]] = entry[1];
}
}
}
var sub;
if (symbol.symbolType.indexOf(': ') >= 0) {
sub = symbol.symbolType.split(': ');
symbol.symbolType = sub.shift();
symbol.text = sub.join(': ');
}
if (symbol.text && symbol.text.indexOf(':$') >= 0) {
sub = symbol.text.split(':$');
symbol.text = sub.shift();
symbol.function = sub.join(':$');
} else if (symbol.symbolType.indexOf(':$') >= 0) {
sub = symbol.symbolType.split(':$');
symbol.symbolType = sub.shift();
symbol.function = sub.join(':$');
} else if (symbol.text && symbol.text.indexOf(':>') >= 0) {
sub = symbol.text.split(':>');
symbol.text = sub.shift();
symbol.link = sub.join(':>');
} else if (symbol.symbolType.indexOf(':>') >= 0) {
sub = symbol.symbolType.split(':>');
symbol.symbolType = sub.shift();
symbol.link = sub.join(':>');
}
if (symbol.symbolType.indexOf('\n') >= 0) {
symbol.symbolType = symbol.symbolType.split('\n')[0];
}
/* adding support for links */
if (symbol.link) {
var startIndex = symbol.link.indexOf('[') + 1;
var endIndex = symbol.link.indexOf(']');
if (startIndex >= 0 && endIndex >= 0) {
symbol.target = symbol.link.substring(startIndex, endIndex);
symbol.link = symbol.link.substring(0, startIndex - 1);
}
}
/* end of link support */
/* adding support for flowstates */
if (symbol.text) {
if (symbol.text.indexOf('|') >= 0) {
var txtAndState = symbol.text.split('|');
symbol.flowstate = txtAndState.pop().trim();
symbol.text = txtAndState.join('|');
}
}
/* end of flowstate support */
chart.symbols[symbol.key] = symbol;
} else if (line.indexOf('->') >= 0) {
var ann = getAnnotation(line);
if (ann) {
line = line.replace('@' + ann, '');
}
// flow
var flowSymbols = line.split('->');
for (var iS = 0, lenS = flowSymbols.length; iS < lenS; iS++) {
var flowSymb = flowSymbols[iS];
var symbVal = getSymbValue(flowSymb);
if (symbVal === 'true' || symbVal === 'false') {
// map true or false to yes or no respectively
flowSymb = flowSymb.replace('true', 'yes');
flowSymb = flowSymb.replace('false', 'no');
}
var next = getNextPath(flowSymb);
var realSymb = getSymbol(flowSymb);
var direction = null;
if (next.indexOf(',') >= 0) {
var condOpt = next.split(',');
next = condOpt[0];
direction = condOpt[1].trim();
}
if (ann) {
if (realSymb.symbolType === 'condition') {
if (next === "yes" || next === "true") {
realSymb.yes_annotation = ann;
} else {
realSymb.no_annotation = ann;
}
} else if (realSymb.symbolType === 'parallel') {
if (next === 'path1') {
realSymb.path1_annotation = ann;
} else if (next === 'path2') {
realSymb.path2_annotation = ann;
} else if (next === 'path3') {
realSymb.path3_annotation = ann;
}
}
ann = null;
}
if (!chart.start) {
chart.start = realSymb;
}
if (iS + 1 < lenS) {
var nextSymb = flowSymbols[iS + 1];
realSymb[next] = getSymbol(nextSymb);
realSymb['direction_' + next] = direction;
direction = null;
}
}
} else if (line.indexOf('@>') >= 0) {
// line style
var lineStyleSymbols = line.split('@>');
for (var iSS = 0, lenSS = lineStyleSymbols.length; iSS < lenSS; iSS++) {
if ((iSS + 1) !== lenSS) {
var curSymb = getSymbol(lineStyleSymbols[iSS]);
var nextSymbol = getSymbol(lineStyleSymbols[iSS+1]);
curSymb['lineStyle'][nextSymbol.key] = JSON.parse(getStyle(lineStyleSymbols[iSS + 1]));
}
}
}
}
return chart;
}
module.exports = parse;
================================================
FILE: src/flowchart.shim.js
================================================
// add indexOf to non ECMA-262 standard compliant browsers
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
"use strict";
if (this === null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (len === 0) {
return -1;
}
var n = 0;
if (arguments.length > 0) {
n = Number(arguments[1]);
if (n != n) { // shortcut for verifying if it's NaN
n = 0;
} else if (n !== 0 && n != Infinity && n != -Infinity) {
n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
}
if (n >= len) {
return -1;
}
var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
for (; k < len; k++) {
if (k in t && t[k] === searchElement) {
return k;
}
}
return -1;
};
}
// add lastIndexOf to non ECMA-262 standard compliant browsers
if (!Array.prototype.lastIndexOf) {
Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
"use strict";
if (this === null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (len === 0) {
return -1;
}
var n = len;
if (arguments.length > 1) {
n = Number(arguments[1]);
if (n != n) {
n = 0;
} else if (n !== 0 && n != (1 / 0) && n != -(1 / 0)) {
n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
}
var k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n);
for (; k >= 0; k--) {
if (k in t && t[k] === searchElement) {
return k;
}
}
return -1;
};
}
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
};
}
================================================
FILE: src/flowchart.symbol.condition.js
================================================
var Symbol = require('./flowchart.symbol');
var inherits = require('./flowchart.helpers').inherits;
var drawAPI = require('./flowchart.functions');
var drawPath = drawAPI.drawPath;
function Condition(chart, options) {
options = options || {};
Symbol.call(this, chart, options);
this.yes_annotation = options.yes_annotation;
this.no_annotation = options.no_annotation;
this.textMargin = this.getAttr('text-margin');
this.yes_direction = options.direction_yes;
this.no_direction = options.direction_no;
if (!this.no_direction && this.yes_direction === 'right') {
this.no_direction = 'bottom';
} else if (!this.yes_direction && this.no_direction === 'bottom') {
this.yes_direction = 'right'
}
this.yes_direction = this.yes_direction || 'bottom';
this.no_direction = this.no_direction || 'right';
this.text.attr({
x: this.textMargin * 2
});
var width = this.text.getBBox().width + 3 * this.textMargin;
width += width/2;
var height = this.text.getBBox().height + 2 * this.textMargin;
height += height/2;
height = Math.max(width * 0.5, height);
var startX = width/4;
var startY = height/4;
this.text.attr({
x: startX + this.textMargin/2
});
var start = {x: startX, y: startY};
var points = [
{x: startX - width/4, y: startY + height/4},
{x: startX - width/4 + width/2, y: startY + height/4 + height/2},
{x: startX - width/4 + width, y: startY + height/4},
{x: startX - width/4 + width/2, y: startY + height/4 - height/2},
{x: startX - width/4, y: startY + height/4}
];
var symbol = drawPath(chart, start, points);
symbol.attr({
stroke: this.getAttr('element-color'),
'stroke-width': this.getAttr('line-width'),
fill: this.getAttr('fill')
});
if (options.link) { symbol.attr('href', options.link); }
if (options.target) { symbol.attr('target', options.target); }
if (options.key) { symbol.node.id = options.key; }
symbol.node.setAttribute('class', this.getAttr('class'));
this.text.attr({
y: symbol.getBBox().height/2
});
this.group.push(symbol);
symbol.insertBefore(this.text);
this.symbol = symbol
this.initialize();
}
inherits(Condition, Symbol);
Condition.prototype.render = function() {
var self = this;
if (this.yes_direction) {
this[this.yes_direction + '_symbol'] = this.yes_symbol;
}
if (this.no_direction) {
this[this.no_direction + '_symbol'] = this.no_symbol;
}
var lineLength = this.getAttr('line-length');
if (this.bottom_symbol) {
var bottomPoint = this.getBottom();
if (!this.bottom_symbol.isPositioned) {
this.bottom_symbol.shiftY(this.getY() + this.height + lineLength);
this.bottom_symbol.setX(bottomPoint.x - this.bottom_symbol.width/2);
this.bottom_symbol.isPositioned = true;
this.bottom_symbol.render();
}
}
if (this.right_symbol) {
var rightPoint = this.getRight();
if (!this.right_symbol.isPositioned) {
this.right_symbol.setY(rightPoint.y - this.right_symbol.height/2);
this.right_symbol.shiftX(this.group.getBBox().x + this.width + lineLength);
(function shift() {
var hasSymbolUnder = false;
var symb;
for (var i = 0, len = self.chart.symbols.length; i < len; i++) {
symb = self.chart.symbols[i];
if (!self.params['align-next'] || self.params['align-next'] !== 'no') {
var diff = Math.abs(symb.getCenter().x - self.right_symbol.getCenter().x);
if (symb.getCenter().y > self.right_symbol.getCenter().y && diff <= self.right_symbol.width/2) {
hasSymbolUnder = true;
break;
}
}
}
if (hasSymbolUnder) {
if (self.right_symbol.symbolType === 'end') return;
self.right_symbol.setX(symb.getX() + symb.width + lineLength);
shift();
}
})();
this.right_symbol.isPositioned = true;
this.right_symbol.render();
}
}
if (this.left_symbol) {
var leftPoint = this.getLeft();
if (!this.left_symbol.isPositioned) {
this.left_symbol.setY(leftPoint.y - this.left_symbol.height / 2);
this.left_symbol.shiftX(-(this.group.getBBox().x + this.width + lineLength));
(function shift() {
var hasSymbolUnder = false;
var symb;
for (var i = 0, len = self.chart.symbols.length; i < len; i++) {
symb = self.chart.symbols[i];
if (!self.params['align-next'] || self.params['align-next'] !== 'no') {
var diff = Math.abs(symb.getCenter().x - self.left_symbol.getCenter().x);
if (symb.getCenter().y > self.left_symbol.getCenter().y && diff <= self.left_symbol.width / 2) {
hasSymbolUnder = true;
break;
}
}
}
if (hasSymbolUnder) {
if (self.left_symbol.symbolType === 'end') return;
self.left_symbol.setX(symb.getX() + symb.width + lineLength);
shift();
}
})();
this.left_symbol.isPositioned = true;
this.left_symbol.render();
}
}
};
Condition.prototype.renderLines = function() {
if (this.yes_symbol) {
this.drawLineTo(this.yes_symbol, this.yes_annotation ? this.yes_annotation : this.getAttr('yes-text'), this.yes_direction);
}
if (this.no_symbol) {
this.drawLineTo(this.no_symbol, this.no_annotation ? this.no_annotation : this.getAttr('no-text'), this.no_direction);
}
};
module.exports = Condition;
================================================
FILE: src/flowchart.symbol.end.js
================================================
var Symbol = require('./flowchart.symbol');
var inherits = require('./flowchart.helpers').inherits;
function End(chart, options) {
var symbol = chart.paper.rect(0, 0, 0, 0, 20);
options = options || {};
options.text = options.text || 'End';
Symbol.call(this, chart, options, symbol);
}
inherits(End, Symbol);
module.exports = End;
================================================
FILE: src/flowchart.symbol.input.js
================================================
var Symbol = require('./flowchart.symbol');
var inherits = require('./flowchart.helpers').inherits;
var drawAPI = require('./flowchart.functions');
var drawPath = drawAPI.drawPath;
function Input(chart, options) {
options = options || {};
Symbol.call(this, chart, options);
this.textMargin = this.getAttr('text-margin');
this.text.attr({
x: this.textMargin * 3
});
var width = this.text.getBBox().width + 4 * this.textMargin;
var height = this.text.getBBox().height + 2 * this.textMargin;
var startX = this.textMargin;
var startY = height/2;
var start = {x: startX, y: startY};
var points = [
{x: startX - this.textMargin + 2 * this.textMargin, y: height},
{x: startX - this.textMargin + width, y: height},
{x: startX - this.textMargin + width + 2 * this.textMargin, y: 0},
{x: startX - this.textMargin, y: 0},
{x: startX, y: startY}
];
var symbol = drawPath(chart, start, points);
symbol.attr({
stroke: this.getAttr('element-color'),
'stroke-width': this.getAttr('line-width'),
fill: this.getAttr('fill')
});
if (options.link) { symbol.attr('href', options.link); }
if (options.target) { symbol.attr('target', options.target); }
if (options.key) { symbol.node.id = options.key; }
symbol.node.setAttribute('class', this.getAttr('class'));
this.text.attr({
y: symbol.getBBox().height/2
});
this.group.push(symbol);
symbol.insertBefore(this.text);
this.symbol = symbol
this.initialize();
}
inherits(Input, Symbol);
Input.prototype.getLeft = function() {
var y = this.getY() + this.group.getBBox().height/2;
var x = this.getX() + this.textMargin;
return {x: x, y: y};
};
Input.prototype.getRight = function() {
var y = this.getY() + this.group.getBBox().height/2;
var x = this.getX() + this.group.getBBox().width - this.textMargin;
return {x: x, y: y};
};
module.exports = Input;
================================================
FILE: src/flowchart.symbol.inputoutput.js
================================================
var Symbol = require('./flowchart.symbol');
var inherits = require('./flowchart.helpers').inherits;
var drawAPI = require('./flowchart.functions');
var drawPath = drawAPI.drawPath;
function InputOutput(chart, options) {
options = options || {};
Symbol.call(this, chart, options);
this.textMargin = this.getAttr('text-margin');
this.text.attr({
x: this.textMargin * 3
});
var width = this.text.getBBox().width + 4 * this.textMargin;
var height = this.text.getBBox().height + 2 * this.textMargin;
var startX = this.textMargin;
var startY = height/2;
var start = {x: startX, y: startY};
var points = [
{x: startX - this.textMargin, y: height},
{x: startX - this.textMargin + width, y: height},
{x: startX - this.textMargin + width + 2 * this.textMargin, y: 0},
{x: startX - this.textMargin + 2 * this.textMargin, y: 0},
{x: startX, y: startY}
];
var symbol = drawPath(chart, start, points);
symbol.attr({
stroke: this.getAttr('element-color'),
'stroke-width': this.getAttr('line-width'),
fill: this.getAttr('fill')
});
if (options.link) { symbol.attr('href', options.link); }
if (options.target) { symbol.attr('target', options.target); }
if (options.key) { symbol.node.id = options.key; }
symbol.node.setAttribute('class', this.getAttr('class'));
this.text.attr({
y: symbol.getBBox().height/2
});
this.group.push(symbol);
symbol.insertBefore(this.text);
this.symbol = symbol
this.initialize();
}
inherits(InputOutput, Symbol);
InputOutput.prototype.getLeft = function() {
var y = this.getY() + this.group.getBBox().height/2;
var x = this.getX() + this.textMargin;
return {x: x, y: y};
};
InputOutput.prototype.getRight = function() {
var y = this.getY() + this.group.getBBox().height/2;
var x = this.getX() + this.group.getBBox().width - this.textMargin;
return {x: x, y: y};
};
module.exports = InputOutput;
================================================
FILE: src/flowchart.symbol.js
================================================
var drawAPI = require('./flowchart.functions');
var drawLine = drawAPI.drawLine;
var checkLineIntersection = drawAPI.checkLineIntersection;
function Symbol(chart, options, symbol) {
this.chart = chart;
this.group = this.chart.paper.set();
this.symbol = symbol;
this.connectedTo = [];
this.symbolType = options.symbolType;
this.flowstate = (options.flowstate || 'future');
this.lineStyle = (options.lineStyle || {});
this.key = (options.key || '');
this.leftLines = [];
this.rightLines = [];
this.topLines = [];
this.bottomLines = [];
this.params = options.params;
this.next_direction = options.next && options['direction_next'] ? options['direction_next'] : undefined;
this.text = this.chart.paper.text(0, 0, options.text);
//Raphael does not support the svg group tag so setting the text node id to the symbol node id plus t
if (options.key) { this.text.node.id = options.key + 't'; }
this.text.node.setAttribute('class', this.getAttr('class') + 't');
this.text.attr({
'text-anchor': 'start',
'x' : this.getAttr('text-margin'),
'fill' : this.getAttr('font-color'),
'font-size' : this.getAttr('font-size')
});
var font = this.getAttr('font');
var fontF = this.getAttr('font-family');
var fontW = this.getAttr('font-weight');
if (font) this.text.attr({ 'font': font });
if (fontF) this.text.attr({ 'font-family': fontF });
if (fontW) this.text.attr({ 'font-weight': fontW });
if (options.link) { this.text.attr('href', options.link); }
//ndrqu Add click function with event and options params
if (options.function) {
this.text.attr({ 'cursor' : 'pointer' });
this.text.node.addEventListener("click", function(evt) {
window[options.function](evt,options);
}, false);
}
if (options.target) { this.text.attr('target', options.target); }
var maxWidth = this.getAttr('maxWidth');
if (maxWidth) {
// using this approach: http://stackoverflow.com/a/3153457/22466
var words = options.text.split(' ');
var tempText = "";
for (var i=0, ii=words.length; i<ii; i++) {
var word = words[i];
this.text.attr("text", tempText + " " + word);
if (this.text.getBBox().width > maxWidth) {
tempText += "\n" + word;
} else {
tempText += " " + word;
}
}
this.text.attr("text", tempText.substring(1));
}
this.group.push(this.text);
if (symbol) {
var tmpMargin = this.getAttr('text-margin');
symbol.attr({
'fill' : this.getAttr('fill'),
'stroke' : this.getAttr('element-color'),
'stroke-width' : this.getAttr('line-width'),
'width' : this.text.getBBox().width + 2 * tmpMargin,
'height' : this.text.getBBox().height + 2 * tmpMargin
});
symbol.node.setAttribute('class', this.getAttr('class'));
var roundness = this.getAttr('roundness');
if (!isNaN(roundness)) {
symbol.node.setAttribute('ry', roundness);
symbol.node.setAttribute('rx', roundness);
}
if (options.link) { symbol.attr('href', options.link); }
if (options.target) { symbol.attr('target', options.target); }
//ndrqu Add click function with event and options params
if (options.function) {
symbol.node.addEventListener("click", function(evt) {
window[options.function](evt,options);
}, false);
symbol.attr({ 'cursor' : 'pointer' });
}
if (options.key) { symbol.node.id = options.key; }
this.group.push(symbol);
symbol.insertBefore(this.text);
this.text.attr({
'y': symbol.getBBox().height/2
});
this.initialize();
}
}
/* Gets the attribute based on Flowstate, Symbol-Name and default, first found wins */
Symbol.prototype.getAttr = function(attName) {
if (!this.chart) {
return undefined;
}
var opt3 = (this.chart.options) ? this.chart.options[attName] : undefined;
var opt2 = (this.chart.options.symbols) ? this.chart.options.symbols[this.symbolType][attName] : undefined;
var opt1;
if (this.chart.options.flowstate && this.chart.options.flowstate[this.flowstate]) {
opt1 = this.chart.options.flowstate[this.flowstate][attName];
}
return (opt1 || opt2 || opt3);
};
Symbol.prototype.initialize = function() {
this.group.transform('t' + this.getAttr('line-width') + ',' + this.getAttr('line-width'));
this.width = this.group.getBBox().width;
this.height = this.group.getBBox().height;
};
Symbol.prototype.getCenter = function() {
return {x: this.getX() + this.width/2,
y: this.getY() + this.height/2};
};
Symbol.prototype.getX = function() {
return this.group.getBBox().x;
};
Symbol.prototype.getY = function() {
return this.group.getBBox().y;
};
Symbol.prototype.shiftX = function(x) {
this.group.transform('t' + (this.getX() + x) + ',' + this.getY());
};
Symbol.prototype.setX = function(x) {
this.group.transform('t' + x + ',' + this.getY());
};
Symbol.prototype.shiftY = function(y) {
this.group.transform('t' + this.getX() + ',' + (this.getY() + y));
};
Symbol.prototype.setY = function(y) {
this.group.transform('t' + this.getX() + ',' + y);
};
Symbol.prototype.getTop = function() {
var y = this.getY();
var x = this.getX() + this.width/2;
return {x: x, y: y};
};
Symbol.prototype.getBottom = function() {
var y = this.getY() + this.height;
var x = this.getX() + this.width/2;
return {x: x, y: y};
};
Symbol.prototype.getLeft = function() {
var y = this.getY() + this.group.getBBox().height/2;
var x = this.getX();
return {x: x, y: y};
};
Symbol.prototype.getRight = function() {
var y = this.getY() + this.group.getBBox().height/2;
var x = this.getX() + this.group.getBBox().width;
return {x: x, y: y};
};
Symbol.prototype.render = function() {
if (this.next) {
var self = this;
var lineLength = this.getAttr('line-length');
if (this.next_direction === 'right') {
var rightPoint = this.getRight();
if (!this.next.isPositioned) {
this.next.setY(rightPoint.y - this.next.height/2);
this.next.shiftX(this.group.getBBox().x + this.width + lineLength);
(function shift() {
var hasSymbolUnder = false;
var symb;
for (var i = 0, len = self.chart.symbols.length; i < len; i++) {
symb = self.chart.symbols[i];
var diff = Math.abs(symb.getCenter().x - self.next.getCenter().x);
if (symb.getCenter().y > self.next.getCenter().y && diff <= self.next.width/2) {
hasSymbolUnder = true;
break;
}
}
if (hasSymbolUnder) {
if (self.next.symbolType === 'end') return;
self.next.setX(symb.getX() + symb.width + lineLength);
shift();
}
})();
this.next.isPositioned = true;
this.next.render();
}
} else if (this.next_direction === 'left') {
var leftPoint = this.getLeft();
if (!this.next.isPositioned) {
this.next.setY(leftPoint.y - this.next.height/2);
this.next.shiftX(-(this.group.getBBox().x + this.width + lineLength));
(function shift() {
var hasSymbolUnder = false;
var symb;
for (var i = 0, len = self.chart.symbols.length; i < len; i++) {
symb = self.chart.symbols[i];
var diff = Math.abs(symb.getCenter().x - self.next.getCenter().x);
if (symb.getCenter().y > self.next.getCenter().y && diff <= self.next.width/2) {
hasSymbolUnder = true;
break;
}
}
if (hasSymbolUnder) {
if (self.next.symbolType === 'end') return;
self.next.setX(symb.getX() + symb.width + lineLength);
shift();
}
})();
this.next.isPositioned = true;
this.next.render();
}
} else {
var bottomPoint = this.getBottom();
if (!this.next.isPositioned) {
this.next.shiftY(this.getY() + this.height + lineLength);
this.next.setX(bottomPoint.x - this.next.width/2);
this.next.isPositioned = true;
this.next.render();
}
}
}
};
Symbol.prototype.renderLines = function() {
if (this.next) {
if (this.next_direction) {
this.drawLineTo(this.next, this.getAttr('arrow-text') || '', this.next_direction);
} else {
this.drawLineTo(this.next, this.getAttr('arrow-text') || '');
}
}
};
Symbol.prototype.drawLineTo = function(symbol, text, origin) {
if (this.connectedTo.indexOf(symbol) < 0) {
this.connectedTo.push(symbol);
}
var x = this.getCenter().x,
y = this.getCenter().y,
right = this.getRight(),
bottom = this.getBottom(),
top = this.getTop(),
left = this.getLeft();
var symbolX = symbol.getCenter().x,
symbolY = symbol.getCenter().y,
symbolTop = symbol.getTop(),
symbolRight = symbol.getRight(),
symbolLeft = symbol.getLeft();
var isOnSameColumn = x === symbolX,
isOnSameLine = y === symbolY,
isUnder = y < symbolY,
isUpper = y > symbolY || this === symbol,
isLeft = x > symbolX,
isRight = x < symbolX;
var maxX = 0,
line,
yOffset,
lineLength = this.getAttr('line-length'),
lineWith = this.getAttr('line-width');
if ((!origin || origin === 'bottom') && isOnSameColumn && isUnder) {
if (symbol.topLines.length === 0 && this.bottomLines.length === 0) {
line = drawLine(this.chart, bottom, symbolTop, text);
} else {
yOffset = Math.max(symbol.topLines.length, this.bottomLines.length) * 10;
line = drawLine(this.chart, bottom, [
{x: symbolTop.x, y: symbolTop.y - yOffset},
{x: symbolTop.x, y: symbolTop.y}
], text);
}
this.bottomLines.push(line);
symbol.topLines.push(line);
this.bottomStart = true;
symbol.topEnd = true;
maxX = bottom.x;
} else if ((!origin || origin === 'right') && isOnSameLine && isRight) {
if (symbol.leftLines.length === 0 && this.rightLines.length === 0) {
line = drawLine(this.chart, right, symbolLeft, text);
} else {
yOffset = Math.max(symbol.leftLines.length, this.rightLines.length) * 10;
line = drawLine(this.chart, right, [
{x: right.x, y: right.y - yOffset},
{x: right.x, y: symbolLeft.y - yOffset},
{x: symbolLeft.x, y: symbolLeft.y - yOffset},
{x: symbolLeft.x, y: symbolLeft.y}
], text);
}
this.rightLines.push(line);
symbol.leftLines.push(line);
this.rightStart = true;
symbol.leftEnd = true;
maxX = symbolLeft.x;
} else if ((!origin || origin === 'left') && isOnSameLine && isLeft) {
if (symbol.rightLines.length === 0 && this.leftLines.length === 0) {
line = drawLine(this.chart, left, symbolRight, text);
} else {
yOffset = Math.max(symbol.rightLines.length, this.leftLines.length) * 10;
line = drawLine(this.chart, right, [
{x: right.x, y: right.y - yOffset},
{x: right.x, y: symbolRight.y - yOffset},
{x: symbolRight.x, y: symbolRight.y - yOffset},
{x: symbolRight.x, y: symbolRight.y}
], text);
}
this.leftLines.push(line);
symbol.rightLines.push(line);
this.leftStart = true;
symbol.rightEnd = true;
maxX = symbolRight.x;
} else if ((!origin || origin === 'right') && isOnSameColumn && isUpper) {
yOffset = Math.max(symbol.topLines.length, this.rightLines.length) * 10;
line = drawLine(this.chart, right, [
{x: right.x + lineLength/2, y: right.y - yOffset},
{x: right.x + lineLength/2, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y}
], text);
this.rightLines.push(line);
symbol.topLines.push(line);
this.rightStart = true;
symbol.topEnd = true;
maxX = right.x + lineLength/2;
} else if ((!origin || origin === 'right') && isOnSameColumn && isUnder) {
yOffset = Math.max(symbol.topLines.length, this.rightLines.length) * 10;
line = drawLine(this.chart, right, [
{x: right.x + lineLength/2, y: right.y - yOffset},
{x: right.x + lineLength/2, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y}
], text);
this.rightLines.push(line);
symbol.topLines.push(line);
this.rightStart = true;
symbol.topEnd = true;
maxX = right.x + lineLength/2;
} else if ((!origin || origin === 'bottom') && isLeft) {
yOffset = Math.max(symbol.topLines.length, this.bottomLines.length) * 10;
if (this.leftEnd && isUpper) {
line = drawLine(this.chart, bottom, [
{x: bottom.x, y: bottom.y + lineLength/2 - yOffset},
{x: bottom.x + (bottom.x - symbolTop.x)/2, y: bottom.y + lineLength/2 - yOffset},
{x: bottom.x + (bottom.x - symbolTop.x)/2, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y}
], text);
} else {
line = drawLine(this.chart, bottom, [
{x: bottom.x, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y}
], text);
}
this.bottomLines.push(line);
symbol.topLines.push(line);
this.bottomStart = true;
symbol.topEnd = true;
maxX = bottom.x + (bottom.x - symbolTop.x)/2;
} else if ((!origin || origin === 'bottom') && isRight && isUnder) {
yOffset = Math.max(symbol.topLines.length, this.bottomLines.length) * 10;
line = drawLine(this.chart, bottom, [
{x: bottom.x, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y}
], text);
this.bottomLines.push(line);
symbol.topLines.push(line);
this.bottomStart = true;
symbol.topEnd = true;
maxX = bottom.x;
if (symbolTop.x > maxX) maxX = symbolTop.x;
} else if ((!origin || origin === 'bottom') && isRight) {
yOffset = Math.max(symbol.topLines.length, this.bottomLines.length) * 10;
line = drawLine(this.chart, bottom, [
{x: bottom.x, y: bottom.y + lineLength/2 - yOffset},
{x: bottom.x + (bottom.x - symbolTop.x)/2, y: bottom.y + lineLength/2 - yOffset},
{x: bottom.x + (bottom.x - symbolTop.x)/2, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y}
], text);
this.bottomLines.push(line);
symbol.topLines.push(line);
this.bottomStart = true;
symbol.topEnd = true;
maxX = bottom.x + (bottom.x - symbolTop.x)/2;
} else if ((origin && origin === 'right') && isLeft) {
yOffset = Math.max(symbol.topLines.length, this.rightLines.length) * 10;
line = drawLine(this.chart, right, [
{x: right.x + lineLength/2, y: right.y},
{x: right.x + lineLength/2, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y}
], text);
this.rightLines.push(line);
symbol.topLines.push(line);
this.rightStart = true;
symbol.topEnd = true;
maxX = right.x + lineLength/2;
} else if ((origin && origin === 'right') && isRight) {
yOffset = Math.max(symbol.topLines.length, this.rightLines.length) * 10;
line = drawLine(this.chart, right, [
{x: symbolTop.x, y: right.y - yOffset},
{x: symbolTop.x, y: symbolTop.y - yOffset}
], text);
this.rightLines.push(line);
symbol.topLines.push(line);
this.rightStart = true;
symbol.topEnd = true;
maxX = right.x + lineLength/2;
} else if ((origin && origin === 'bottom') && isOnSameColumn && isUpper) {
yOffset = Math.max(symbol.topLines.length, this.bottomLines.length) * 10;
line = drawLine(this.chart, bottom, [
{x: bottom.x, y: bottom.y + lineLength/2 - yOffset},
{x: right.x + lineLength/2, y: bottom.y + lineLength/2 - yOffset},
{x: right.x + lineLength/2, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y}
], text);
this.bottomLines.push(line);
symbol.topLines.push(line);
this.bottomStart = true;
symbol.topEnd = true;
maxX = bottom.x + lineLength/2;
} else if ((origin === 'left') && isOnSameColumn && isUpper) {
var diffX = left.x - lineLength/2;
if (symbolLeft.x < left.x) {
diffX = symbolLeft.x - lineLength/2;
}
yOffset = Math.max(symbol.topLines.length, this.leftLines.length) * 10;
line = drawLine(this.chart, left, [
{x: diffX, y: left.y - yOffset},
{x: diffX, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y}
], text);
this.leftLines.push(line);
symbol.topLines.push(line);
this.leftStart = true;
symbol.topEnd = true;
maxX = left.x;
} else if ((origin === 'left')) {
yOffset = Math.max(symbol.topLines.length, this.leftLines.length) * 10;
line = drawLine(this.chart, left, [
{x: symbolTop.x + (left.x - symbolTop.x)/2, y: left.y},
{x: symbolTop.x + (left.x - symbolTop.x)/2, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y}
], text);
this.leftLines.push(line);
symbol.topLines.push(line);
this.leftStart = true;
symbol.topEnd = true;
maxX = left.x;
} else if ((origin === 'top')) {
yOffset = Math.max(symbol.topLines.length, this.topLines.length) * 10;
line = drawLine(this.chart, top, [
{x: top.x, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y - lineLength/2 - yOffset},
{x: symbolTop.x, y: symbolTop.y}
], text);
this.topLines.push(line);
symbol.topLines.push(line);
this.topStart = true;
symbol.topEnd = true;
maxX = top.x;
}
//update line style
if (this.lineStyle[symbol.key] && line){
line.attr(this.lineStyle[symbol.key]);
}
if (line) {
for (var l = 0, llen = this.chart.lines.length; l < llen; l++) {
var otherLine = this.chart.lines[l];
var ePath = otherLine.attr('path'),
lPath = line.attr('path');
for (var iP = 0, lenP = ePath.length - 1; iP < lenP; iP++) {
var newPath = [];
newPath.push(['M', ePath[iP][1], ePath[iP][2]]);
newPath.push(['L', ePath[iP + 1][1], ePath[iP + 1][2]]);
var line1_from_x = newPath[0][1];
var line1_from_y = newPath[0][2];
var line1_to_x = newPath[1][1];
var line1_to_y = newPath[1][2];
for (var lP = 0, lenlP = lPath.length - 1; lP < lenlP; lP++) {
var newLinePath = [];
newLinePath.push(['M', lPath[lP][1], lPath[lP][2]]);
newLinePath.push(['L', lPath[lP + 1][1], lPath[lP + 1][2]]);
var line2_from_x = newLinePath[0][1];
var line2_from_y = newLinePath[0][2];
var line2_to_x = newLinePath[1][1];
var line2_to_y = newLinePath[1][2];
var res = checkLineIntersection(line1_from_x, line1_from_y, line1_to_x, line1_to_y, line2_from_x, line2_from_y, line2_to_x, line2_to_y);
if (res.onLine1 && res.onLine2) {
var newSegment;
if (line2_from_y === line2_to_y) {
if (line2_from_x > line2_to_x) {
newSegment = ['L', res.x + lineWith * 2, line2_from_y];
lPath.splice(lP + 1, 0, newSegment);
newSegment = ['C', res.x + lineWith * 2, line2_from_y, res.x, line2_from_y - lineWith * 4, res.x - lineWith * 2, line2_from_y];
lPath.splice(lP + 2, 0, newSegment);
line.attr('path', lPath);
} else {
newSegment = ['L', res.x - lineWith * 2, line2_from_y];
lPath.splice(lP + 1, 0, newSegment);
newSegment = ['C', res.x - lineWith * 2, line2_from_y, res.x, line2_from_y - lineWith * 4, res.x + lineWith * 2, line2_from_y];
lPath.splice(lP + 2, 0, newSegment);
line.attr('path', lPath);
}
} else {
if (line2_from_y > line2_to_y) {
newSegment = ['L', line2_from_x, res.y + lineWith * 2];
lPath.splice(lP + 1, 0, newSegment);
newSegment = ['C', line2_from_x, res.y + lineWith * 2, line2_from_x + lineWith * 4, res.y, line2_from_x, res.y - lineWith * 2];
lPath.splice(lP + 2, 0, newSegment);
line.attr('path', lPath);
} else {
newSegment = ['L', line2_from_x, res.y - lineWith * 2];
lPath.splice(lP + 1, 0, newSegment);
newSegment = ['C', line2_from_x, res.y - lineWith * 2, line2_from_x + lineWith * 4, res.y, line2_from_x, res.y + lineWith * 2];
lPath.splice(lP + 2, 0, newSegment);
line.attr('path', lPath);
}
}
lP += 2;
}
}
}
}
this.chart.lines.push(line);
if (this.chart.minXFromSymbols === undefined || this.chart.minXFromSymbols > left.x) {
this.chart.minXFromSymbols = left.x;
}
}
if (!this.chart.maxXFromLine || (this.chart.maxXFromLine && maxX > this.chart.maxXFromLine)) {
this.chart.maxXFromLine = maxX;
}
};
module.exports = Symbol;
================================================
FILE: src/flowchart.symbol.operation.js
================================================
var Symbol = require('./flowchart.symbol');
var inherits = require('./flowchart.helpers').inherits;
function Operation(chart, options) {
var symbol = chart.paper.rect(0, 0, 0, 0);
options = options || {};
Symbol.call(this, chart, options, symbol);
}
inherits(Operation, Symbol);
module.exports = Operation;
================================================
FILE: src/flowchart.symbol.output.js
================================================
var Symbol = require('./flowchart.symbol');
var inherits = require('./flowchart.helpers').inherits;
var drawAPI = require('./flowchart.functions');
var drawPath = drawAPI.drawPath;
function Output(chart, options) {
options = options || {};
Symbol.call(this, chart, options);
this.textMargin = this.getAttr('text-margin');
this.text.attr({
x: this.textMargin * 3
});
var width = this.text.getBBox().width + 4 * this.textMargin;
var height = this.text.getBBox().height + 2 * this.textMargin;
var startX = this.textMargin;
var startY = height/2;
var start = {x: startX, y: startY};
var points = [
{x: startX - this.textMargin, y: height},
{x: startX - this.textMargin + width + 2 * this.textMargin, y: height},
{x: startX - this.textMargin + width, y: 0},
{x: startX - this.textMargin + 2 * this.textMargin, y: 0},
{x: startX, y: startY}
];
var symbol = drawPath(chart, start, points);
symbol.attr({
stroke: this.getAttr('element-color'),
'stroke-width': this.getAttr('line-width'),
fill: this.getAttr('fill')
});
if (options.link) { symbol.attr('href', options.link); }
if (options.target) { symbol.attr('target', options.target); }
if (options.key) { symbol.node.id = options.key; }
symbol.node.setAttribute('class', this.getAttr('class'));
this.text.attr({
y: symbol.getBBox().height/2
});
this.group.push(symbol);
symbol.insertBefore(this.text);
this.symbol = symbol
this.initialize();
}
inherits(Output, Symbol);
Output.prototype.getLeft = function() {
var y = this.getY() + this.group.getBBox().height/2;
var x = this.getX() + this.textMargin;
return {x: x, y: y};
};
Output.prototype.getRight = function() {
var y = this.getY() + this.group.getBBox().height/2;
var x = this.getX() + this.group.getBBox().width - this.textMargin;
return {x: x, y: y};
};
module.exports = Output;
/*
//var Symbol = require('./flowchart.symbol');
var inherits = require('./flowchart.helpers').inherits;
var drawAPI = require('./flowchart.functions');
var InputOutput = require('./flowchart.symbol.inputoutput');
var drawPath = drawAPI.drawPath;
function Output(chart, options) {
options = options || {};
InputOutput.call(this, chart, options);
var width = this.text.getBBox().width + 4 * this.textMargin;
var height = this.text.getBBox().height + 2 * this.textMargin;
var startX = this.textMargin;
var startY = height/2;
var start = {x: startX, y: startY};
var points = [
{x: startX - this.textMargin + 2 * this.textMargin, y: height},
{x: startX - this.textMargin + width, y: height},
{x: startX - this.textMargin + width + 2 * this.textMargin, y: 0},
{x: startX - this.textMargin, y: 0},
{x: startX, y: startY}
];
var symbol = drawPath(chart, start, points);
symbol.attr({
stroke: this.getAttr('element-color'),
'stroke-width': this.getAttr('line-width'),
fill: this.getAttr('fill')
});
if (options.link) { symbol.attr('href', options.link); }
if (options.target) { symbol.attr('target', options.target); }
if (options.key) { symbol.node.id = options.key; }
symbol.node.setAttribute('class', this.getAttr('class'));
this.text.attr({
y: symbol.getBBox().height/2
});
this.group.push(symbol);
symbol.insertBefore(this.text);
if (this.symbol){
this.group.remove(this.symbol); //tds
this.symbol.parentNode.removeChild(this.symbol); //tds
}
this.symbol = symbol
this.initialize();
}
inherits(Output, InputOutput);
module.exports = Output;
*/
================================================
FILE: src/flowchart.symbol.parallel.js
================================================
var Symbol = require('./flowchart.symbol');
var inherits = require('./flowchart.helpers').inherits;
function Parallel(chart, options) {
var symbol = chart.paper.rect(0, 0, 0, 0);
options = options || {};
Symbol.call(this, chart, options, symbol);
this.path1_annotation = options.path1_annotation || '';
this.path2_annotation = options.path2_annotation || '';
this.path3_annotation = options.path3_annotation || '';
this.textMargin = this.getAttr('text-margin');
this.path1_direction = 'bottom';
this.path2_direction = 'right';
this.path3_direction = 'top';
this.params = options.params;
if (options.direction_next === 'path1' && !options[options.direction_next] && options.next) {
options[options.direction_next] = options.next;
}
if (options.direction_next === 'path2' && !options[options.direction_next] && options.next) {
options[options.direction_next] = options.next;
}
if (options.direction_next === 'path3' && !options[options.direction_next] && options.next) {
options[options.direction_next] = options.next;
}
if (options.path1 && options.direction_path1 && options.path2 && !options.direction_path2 && options.path3 && !options.direction_path3) {
if (options.direction_path1 === 'right') {
this.path2_direction = 'bottom';
this.path1_direction = 'right';
this.path3_direction = 'top';
} else if (options.direction_path1 === 'top') {
this.path2_direction = 'right';
this.path1_direction = 'top';
this.path3_direction = 'bottom';
} else if (options.direction_path1 === 'left') {
this.path2_direction = 'right';
this.path1_direction = 'left';
this.path3_direction = 'bottom';
} else {
this.path2_direction = 'right';
this.path1_direction = 'bottom';
this.path3_direction = 'top';
}
} else if (options.path1 && !options.direction_path1 && options.path2 && options.direction_path2 && options.path3 && !options.direction_path3) {
if (options.direction_path2 === 'right') {
this.path1_direction = 'bottom';
this.path2_direction = 'right';
this.path3_direction = 'top';
} else if (options.direction_path2 === 'left') {
this.path1_direction = 'bottom';
this.path2_direction = 'left';
this.path3_direction = 'right';
} else {
this.path1_direction = 'right';
this.path2_direction = 'bottom';
this.path3_direction = 'top';
}
} else if (options.path1 && !options.direction_path1 && options.path2 && !options.direction_path2 && options.path3 && options.direction_path3) {
if (options.direction_path2 === 'right') {
this.path1_direction = 'bottom';
this.path2_direction = 'top';
this.path3_direction = 'right';
} else if (options.direction_path2 === 'left') {
this.path1_direction = 'bottom';
this.path2_direction = 'right';
this.path3_direction = 'left';
} else {
this.path1_direction = 'right';
this.path2_direction = 'bottom';
this.path3_direction = 'top';
}
} else {
this.path1_direction = options.direction_path1;
this.path2_direction = options.direction_path2;
this.path3_direction = options.direction_path3;
}
this.path1_direction = this.path1_direction || 'bottom';
this.path2_direction = this.path2_direction || 'right';
this.path3_direction = this.path3_direction || 'top';
this.initialize();
}
inherits(Parallel, Symbol);
Parallel.prototype.render = function() {
if (this.path1_direction) {
this[this.path1_direction + '_symbol'] = this.path1_symbol;
}
if (this.path2_direction) {
this[this.path2_direction + '_symbol'] = this.path2_symbol;
}
if (this.path3_direction) {
this[this.path3_direction + '_symbol'] = this.path3_symbol;
}
var lineLength = this.getAttr('line-length');
if (this.bottom_symbol) {
var bottomPoint = this.getBottom();
if (!this.bottom_symbol.isPositioned) {
this.bottom_symbol.shiftY(this.getY() + this.height + lineLength);
this.bottom_symbol.setX(bottomPoint.x - this.bottom_symbol.width / 2);
this.bottom_symbol.isPositioned = true;
this.bottom_symbol.render();
}
}
if (this.top_symbol) {
var topPoint = this.getTop();
if (!this.top_symbol.isPositioned) {
this.top_symbol.shiftY(this.getY() - this.top_symbol.height - lineLength);
this.top_symbol.setX(topPoint.x + this.top_symbol.width);
this.top_symbol.isPositioned = true;
this.top_symbol.render();
}
}
var self = this;
if (this.left_symbol) {
var leftPoint = this.getLeft();
if (!this.left_symbol.isPositioned) {
this.left_symbol.setY(leftPoint.y - this.left_symbol.height / 2);
this.left_symbol.shiftX(-(this.group.getBBox().x + this.width + lineLength));
(function shift() {
var hasSymbolUnder = false;
var symb;
for (var i = 0, len = self.chart.symbols.length; i < len; i++) {
symb = self.chart.symbols[i];
if (!self.params['align-next'] || self.params['align-next'] !== 'no') {
var diff = Math.abs(symb.getCenter().x - self.left_symbol.getCenter().x);
if (symb.getCenter().y > self.left_symbol.getCenter().y && diff <= self.left_symbol.width / 2) {
hasSymbolUnder = true;
break;
}
}
}
if (hasSymbolUnder) {
if (self.left_symbol.symbolType === 'end') return;
self.left_symbol.setX(symb.getX() + symb.width + lineLength);
shift();
}
})();
this.left_symbol.isPositioned = true;
this.left_symbol.render();
}
}
if (this.right_symbol) {
var rightPoint = this.getRight();
if (!this.right_symbol.isPositioned) {
this.right_symbol.setY(rightPoint.y - this.right_symbol.height / 2);
this.right_symbol.shiftX(this.group.getBBox().x + this.width + lineLength);
(function shift() {
var hasSymbolUnder = false;
var symb;
for (var i = 0, len = self.chart.symbols.length; i < len; i++) {
symb = self.chart.symbols[i];
if (!self.params['align-next'] || self.params['align-next'] !== 'no') {
var diff = Math.abs(symb.getCenter().x - self.right_symbol.getCenter().x);
if (symb.getCenter().y > self.right_symbol.getCenter().y && diff <= self.right_symbol.width / 2) {
hasSymbolUnder = true;
break;
}
}
}
if (hasSymbolUnder) {
if (self.right_symbol.symbolType === 'end') return;
self.right_symbol.setX(symb.getX() + symb.width + lineLength);
shift();
}
})();
this.right_symbol.isPositioned = true;
this.right_symbol.render();
}
}
};
Parallel.prototype.renderLines = function() {
if (this.path1_symbol) {
this.drawLineTo(this.path1_symbol, this.path1_annotation, this.path1_direction);
}
if (this.path2_symbol) {
this.drawLineTo(this.path2_symbol, this.path2_annotation, this.path2_direction);
}
if (this.path3_symbol) {
this.drawLineTo(this.path3_symbol, this.path3_annotation, this.path3_direction);
}
};
module.exports = Parallel;
================================================
FILE: src/flowchart.symbol.start.js
================================================
var Symbol = require('./flowchart.symbol');
var inherits = require('./flowchart.helpers').inherits;
function Start(chart, options) {
var symbol = chart.paper.rect(0, 0, 0, 0, 20);
options = options || {};
options.text = options.text || 'Start';
Symbol.call(this, chart, options, symbol);
}
inherits(Start, Symbol);
module.exports = Start;
// Start.prototype.render = function() {
// if (this.next) {
// var lineLength = this.chart.options.symbols[this.symbolType]['line-length'] || this.chart.options['line-length'];
// var bottomPoint = this.getBottom();
// var topPoint = this.next.getTop();
// if (!this.next.isPositioned) {
// this.next.shiftY(this.getY() + this.height + lineLength);
// this.next.setX(bottomPoint.x - this.next.width/2);
// this.next.isPositioned = true;
// this.next.render();
// }
// }
// };
// Start.prototype.renderLines = function() {
// if (this.next) {
// this.drawLineTo(this.next);
// }
// };
================================================
FILE: src/flowchart.symbol.subroutine.js
================================================
var Symbol = require('./flowchart.symbol');
var inherits = require('./flowchart.helpers').inherits;
function Subroutine(chart, options) {
var symbol = chart.paper.rect(0, 0, 0, 0);
options = options || {};
Symbol.call(this, chart, options, symbol);
symbol.attr({
width: this.text.getBBox().width + 4 * this.getAttr('text-margin')
});
this.text.attr({
'x': 2 * this.getAttr('text-margin')
});
var innerWrap = chart.paper.rect(0, 0, 0, 0);
innerWrap.attr({
x: this.getAttr('text-margin'),
stroke: this.getAttr('element-color'),
'stroke-width': this.getAttr('line-width'),
width: this.text.getBBox().width + 2 * this.getAttr('text-margin'),
height: this.text.getBBox().height + 2 * this.getAttr('text-margin'),
fill: this.getAttr('fill')
});
if (options.key) { innerWrap.node.id = options.key + 'i'; }
var font = this.getAttr('font');
var fontF = this.getAttr('font-family');
var fontW = this.getAttr('font-weight');
if (font) innerWrap.attr({ 'font': font });
if (fontF) innerWrap.attr({ 'font-family': fontF });
if (fontW) innerWrap.attr({ 'font-weight': fontW });
if (options.link) { innerWrap.attr('href', options.link); }
if (options.target) { innerWrap.attr('target', options.target); }
this.group.push(innerWrap);
innerWrap.insertBefore(this.text);
this.initialize();
}
inherits(Subroutine, Symbol);
module.exports = Subroutine;
================================================
FILE: src/jquery-plugin.js
================================================
if (typeof jQuery != 'undefined') {
var parse = require('./flowchart.parse');
(function( $ ) {
function paramFit(needle, haystack) {
return needle == haystack ||
( Array.isArray(haystack) && (haystack.includes(needle) || haystack.includes(Number(needle)) ))
}
var methods = {
init : function(options) {
return this.each(function() {
var $this = $(this);
this.chart = parse($this.text());
$this.html('');
this.chart.drawSVG(this, options);
});
},
setFlowStateByParam : function(param, paramValue, newFlowState) {
return this.each(function() {
var chart = this.chart;
// @todo this should be part of Symbol API
var nextSymbolKeys = ['next', 'yes', 'no', 'path1', 'path2', 'path3'];
for (var property in chart.symbols) {
if (chart.symbols.hasOwnProperty(property)) {
var symbol = chart.symbols[property];
var val = symbol.params[param];
if (paramFit(val, paramValue)) {
symbol.flowstate = newFlowState;
for (var nski = 0; nski < nextSymbolKeys.length; nski++) {
var nextSymbolKey = nextSymbolKeys[nski];
if (
symbol[nextSymbolKey] &&
symbol[nextSymbolKey]['params'] &&
symbol[nextSymbolKey]['params'][param] &&
paramFit(symbol[nextSymbolKey]['params'][param], paramValue)
) {
symbol.lineStyle[symbol[nextSymbolKey]['key']] = {stroke: chart.options()['flowstate'][newFlowState]['fill']};
}
}
}
}
}
chart.clean();
chart.drawSVG(this);
});
},
clearFlowState: function () {
return this.each(function() {
var chart = this.chart;
for (var property in chart.symbols) {
if (chart.symbols.hasOwnProperty(property)) {
var node = chart.symbols[property];
node.flowstate = '';
}
}
chart.clean();
chart.drawSVG(this);
});
}
};
$.fn.flowChart = function(methodOrOptions) {
if ( methods[methodOrOptions] ) {
return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
// Default to "init"
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.flowChart' );
}
};
})(jQuery); // eslint-disable-line
}
================================================
FILE: types/index.d.ts
================================================
declare module "flowchart.js" {
namespace FlowChart {
interface SVGOptions {
x: number;
y: number;
"line-width": number;
"line-length": number;
"text-margin": number;
"font-size": number;
"font-color": string;
"line-color": string;
"element-color": string;
fill: string;
roundness?: number;
"yes-text": string;
"no-text": string;
"arrow-end": string;
scale: number;
class: string;
[props: string]: any;
}
interface DrawOptions extends Partial<SVGOptions> {
/** Stymbol Styles */
symbols?: Record<string, Partial<SVGOptions>>;
/** FlowState config */
flowstate?: Record<string, Partial<SVGOptions>>;
}
interface Instance {
clean: () => void;
drawSVG: (container: HTMLElement | string, options?: DrawOptions) => void;
}
}
interface FlowChart {
parse: (code: string) => FlowChart.Instance;
}
const FlowChart: FlowChart;
export = FlowChart;
}
================================================
FILE: webpack.config.js
================================================
var path = require('path');
var webpack = require('webpack');
var moment = require('moment');
var component = require('./package.json');
var banner =
'// ' + component.name + ', v' + component.version + '\n' +
'// Copyright (c)' + moment().format('YYYY') + ' Adriano Raiano (adrai).\n' +
'// Distributed under MIT license\n' +
'// http://adrai.github.io/flowchart.js\n';
var NODE_ENV = process.env.NODE_ENV || 'development';
var defines = new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(NODE_ENV)
}
});
var config = {
devtool: 'source-map', // always build source map
entry: [
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'release'),
filename: component.name + '.js',
publicPath: '/release/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
defines
],
resolve: {
extensions: ['', '.js'],
modulesDirectories: ['src', 'node_modules'],
alias: {
'dev/raphael.core.js': './dev/raphael.core.js',
'raphael.core': './raphael.core.js',
'raphael.svg': './dev/raphael.svg.js',
'raphael.vml': './dev/raphael.vml.js'
}
}
};
if (NODE_ENV === 'production') {
var minified = process.env.MINIFIED == '1';
var withoutJs = component.name;
withoutJs = withoutJs.replace('.js', '');
var filename = minified ? withoutJs + '.min.js' : withoutJs + '.js';
var uglifyOptions = {
sourceMap: true,
compressor: {
warnings: false,
dead_code: true
},
output: {
preamble: banner,
comments: false
}
};
if (!minified) {
uglifyOptions.beautify = true;
uglifyOptions.mangle = false;
uglifyOptions.output.comments = 'all';
}
config.entry = './index';
config.externals = {
raphael: 'Raphael'
};
config.output = {
devtoolLineToLine: true,
sourceMapFilename: filename + '.map',
path: path.join(__dirname, 'release'),
filename: filename,
libraryTarget: 'umd'
};
config.plugins = [
new webpack.optimize.OccurenceOrderPlugin(),
defines,
new webpack.optimize.UglifyJsPlugin(uglifyOptions)
];
}
module.exports = config;
gitextract_z05x90lu/ ├── .eslintignore ├── .eslintrc ├── .github/ │ └── FUNDING.yml ├── .gitignore ├── .gitmodules ├── .npmignore ├── README.md ├── devserver.js ├── example/ │ ├── index.html │ ├── loadFile.html │ └── test.txt ├── index.html ├── index.js ├── license ├── package.json ├── release/ │ └── flowchart.js ├── releasenotes.md ├── src/ │ ├── flowchart.chart.js │ ├── flowchart.defaults.js │ ├── flowchart.functions.js │ ├── flowchart.helpers.js │ ├── flowchart.parse.js │ ├── flowchart.shim.js │ ├── flowchart.symbol.condition.js │ ├── flowchart.symbol.end.js │ ├── flowchart.symbol.input.js │ ├── flowchart.symbol.inputoutput.js │ ├── flowchart.symbol.js │ ├── flowchart.symbol.operation.js │ ├── flowchart.symbol.output.js │ ├── flowchart.symbol.parallel.js │ ├── flowchart.symbol.start.js │ ├── flowchart.symbol.subroutine.js │ └── jquery-plugin.js ├── types/ │ └── index.d.ts └── webpack.config.js
SYMBOL INDEX (41 symbols across 17 files)
FILE: release/flowchart.js
function __webpack_require__ (line 18) | function __webpack_require__(moduleId) {
function _defaults (line 95) | function _defaults(options, defaultOptions) {
function _inherits (line 102) | function _inherits(ctor, superCtor) {
function Symbol (line 130) | function Symbol(chart, options, symbol) {
function drawPath (line 522) | function drawPath(chart, location, points) {
function drawLine (line 538) | function drawLine(chart, from, to, text) {
function checkLineIntersection (line 584) | function checkLineIntersection(line1StartX, line1StartY, line1EndX, line...
function parse (line 618) | function parse(input) {
function Condition (line 800) | function Condition(chart, options) {
function Parallel (line 905) | function Parallel(chart, options) {
function FlowChart (line 995) | function FlowChart(container, options) {
function End (line 1137) | function End(chart, options) {
function Input (line 1149) | function Input(chart, options) {
function InputOutput (line 1204) | function InputOutput(chart, options) {
function Operation (line 1259) | function Operation(chart, options) {
function Output (line 1271) | function Output(chart, options) {
function Start (line 1326) | function Start(chart, options) {
function Subroutine (line 1338) | function Subroutine(chart, options) {
function paramFit (line 1375) | function paramFit(needle, haystack) {
FILE: src/flowchart.chart.js
function FlowChart (line 7) | function FlowChart(container, options) {
FILE: src/flowchart.functions.js
function drawPath (line 1) | function drawPath(chart, location, points) {
function drawLine (line 27) | function drawLine(chart, from, to, text) {
function checkLineIntersection (line 133) | function checkLineIntersection(line1StartX, line1StartY, line1EndX, line...
FILE: src/flowchart.helpers.js
function _defaults (line 1) | function _defaults(options, defaultOptions) {
function _inherits (line 23) | function _inherits(ctor, superCtor) {
FILE: src/flowchart.parse.js
function parse (line 13) | function parse(input) {
FILE: src/flowchart.symbol.condition.js
function Condition (line 6) | function Condition(chart, options) {
FILE: src/flowchart.symbol.end.js
function End (line 4) | function End(chart, options) {
FILE: src/flowchart.symbol.input.js
function Input (line 6) | function Input(chart, options) {
FILE: src/flowchart.symbol.inputoutput.js
function InputOutput (line 6) | function InputOutput(chart, options) {
FILE: src/flowchart.symbol.js
function Symbol (line 5) | function Symbol(chart, options, symbol) {
FILE: src/flowchart.symbol.operation.js
function Operation (line 4) | function Operation(chart, options) {
FILE: src/flowchart.symbol.output.js
function Output (line 6) | function Output(chart, options) {
FILE: src/flowchart.symbol.parallel.js
function Parallel (line 4) | function Parallel(chart, options) {
FILE: src/flowchart.symbol.start.js
function Start (line 4) | function Start(chart, options) {
FILE: src/flowchart.symbol.subroutine.js
function Subroutine (line 4) | function Subroutine(chart, options) {
FILE: src/jquery-plugin.js
function paramFit (line 5) | function paramFit(needle, haystack) {
FILE: types/index.d.ts
type SVGOptions (line 3) | interface SVGOptions {
type DrawOptions (line 23) | interface DrawOptions extends Partial<SVGOptions> {
type Instance (line 30) | interface Instance {
type FlowChart (line 36) | interface FlowChart {
Condensed preview — 36 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (192K chars).
[
{
"path": ".eslintignore",
"chars": 17,
"preview": "**/node_modules/\n"
},
{
"path": ".eslintrc",
"chars": 157,
"preview": "{\n \"extends\": \"defaults\",\n\n \"env\": {\n \"browser\": true,\n \"node\": true\n },\n\n \"globals\": {\n \"$\": true\n },\n\n "
},
{
"path": ".github/FUNDING.yml",
"chars": 719,
"preview": "# These are supported funding model platforms\n\ngithub: [adrai] # Replace with up to 4 GitHub Sponsors-enabled usernames "
},
{
"path": ".gitignore",
"chars": 255,
"preview": "$ cat .gitignore\n\n# Can ignore specific files\n.settings.xml\n.monitor\n.DS_Store\n.idea\n\n# Use wildcards as well\n*~\n#*.swp\n"
},
{
"path": ".gitmodules",
"chars": 77,
"preview": "[submodule \"site\"]\n\tpath = site\n\turl = git@github.com:adrai/flowchart.js.git\n"
},
{
"path": ".npmignore",
"chars": 134,
"preview": "example\nimgs\nsite\nrelease\nbin\nreleasenotes.md\nwebpack.config.js\nindex.html\ndevserver.js\nbower.json\n.eslintignore\n.eslint"
},
{
"path": "README.md",
"chars": 7428,
"preview": "[](http://js.org)\n\n# [flowchart.js]"
},
{
"path": "devserver.js",
"chars": 659,
"preview": "var path = require('path');\nvar express = require('express');\nvar webpack = require('webpack');\nvar config = require('./"
},
{
"path": "example/index.html",
"chars": 4104,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>flowchart.js · Playground</tit"
},
{
"path": "example/loadFile.html",
"chars": 998,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>flowchart.js · Playground</title>\n <sty"
},
{
"path": "example/test.txt",
"chars": 298,
"preview": "st=>start: Start:>http://www.google.com[blank]\ne=>end:>http://www.google.com\nop1=>operation: My Ooooperation:$myFunction"
},
{
"path": "index.html",
"chars": 1369,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <title>Demo page</title>\n <meta charset=\"utf-8\">\n <meta name=\"viewpo"
},
{
"path": "index.js",
"chars": 247,
"preview": "require('./src/flowchart.shim');\nvar parse = require('./src/flowchart.parse');\nrequire('./src/jquery-plugin');\n\nvar Flow"
},
{
"path": "license",
"chars": 1081,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2023 Adriano Raiano\n\nPermission is hereby granted, free of charge, to any person ob"
},
{
"path": "package.json",
"chars": 1250,
"preview": "{\n \"author\": \"adrai\",\n \"name\": \"flowchart.js\",\n \"version\": \"1.18.0\",\n \"main\": \"./index\",\n \"private\": false,\n \"engi"
},
{
"path": "release/flowchart.js",
"chars": 84060,
"preview": "// flowchart.js, v1.18.0\n// Copyright (c)2023 Adriano Raiano (adrai).\n// Distributed under MIT license\n// http://adrai.g"
},
{
"path": "releasenotes.md",
"chars": 6375,
"preview": "### v1.18.0\n\n- introduce input and output [#251](https://github.com/adrai/flowchart.js/pull/251)\n\n### v1.17.1\n\n- fix sta"
},
{
"path": "src/flowchart.chart.js",
"chars": 4321,
"preview": "var Raphael = require('raphael');\nvar defaults = require('./flowchart.helpers').defaults;\nvar defaultOptions = require('"
},
{
"path": "src/flowchart.defaults.js",
"chars": 893,
"preview": "// defaults\nmodule.exports = {\n 'x': 0,\n 'y': 0,\n // 'roundness': 0,\n 'line-width': 3,\n 'line-length': 50,\n 'text-"
},
{
"path": "src/flowchart.functions.js",
"chars": 5158,
"preview": "function drawPath(chart, location, points) {\n var i, len;\n var path = 'M{0},{1}';\n for (i = 2, len = 2 * points.lengt"
},
{
"path": "src/flowchart.helpers.js",
"chars": 1320,
"preview": "function _defaults(options, defaultOptions) {\n if (!options || typeof options === 'function') {\n return defaultOptio"
},
{
"path": "src/flowchart.parse.js",
"chars": 10908,
"preview": "var FlowChart = require('./flowchart.chart');\nvar Start = require('./flowchart.symbol.start');\nvar End = require('./flow"
},
{
"path": "src/flowchart.shim.js",
"chars": 1755,
"preview": "// add indexOf to non ECMA-262 standard compliant browsers\nif (!Array.prototype.indexOf) {\n Array.prototype.indexOf = f"
},
{
"path": "src/flowchart.symbol.condition.js",
"chars": 5492,
"preview": "var Symbol = require('./flowchart.symbol');\nvar inherits = require('./flowchart.helpers').inherits;\nvar drawAPI = requir"
},
{
"path": "src/flowchart.symbol.end.js",
"chars": 341,
"preview": "var Symbol = require('./flowchart.symbol');\nvar inherits = require('./flowchart.helpers').inherits;\n\nfunction End(chart,"
},
{
"path": "src/flowchart.symbol.input.js",
"chars": 1893,
"preview": "var Symbol = require('./flowchart.symbol');\nvar inherits = require('./flowchart.helpers').inherits;\nvar drawAPI = requir"
},
{
"path": "src/flowchart.symbol.inputoutput.js",
"chars": 1921,
"preview": "var Symbol = require('./flowchart.symbol');\nvar inherits = require('./flowchart.helpers').inherits;\nvar drawAPI = requir"
},
{
"path": "src/flowchart.symbol.js",
"chars": 21594,
"preview": "var drawAPI = require('./flowchart.functions');\nvar drawLine = drawAPI.drawLine;\nvar checkLineIntersection = drawAPI.che"
},
{
"path": "src/flowchart.symbol.operation.js",
"chars": 315,
"preview": "var Symbol = require('./flowchart.symbol');\nvar inherits = require('./flowchart.helpers').inherits;\n\nfunction Operation("
},
{
"path": "src/flowchart.symbol.output.js",
"chars": 3546,
"preview": "var Symbol = require('./flowchart.symbol');\nvar inherits = require('./flowchart.helpers').inherits;\nvar drawAPI = requir"
},
{
"path": "src/flowchart.symbol.parallel.js",
"chars": 7220,
"preview": "var Symbol = require('./flowchart.symbol');\nvar inherits = require('./flowchart.helpers').inherits;\n\nfunction Parallel(c"
},
{
"path": "src/flowchart.symbol.start.js",
"chars": 995,
"preview": "var Symbol = require('./flowchart.symbol');\nvar inherits = require('./flowchart.helpers').inherits;\n\nfunction Start(char"
},
{
"path": "src/flowchart.symbol.subroutine.js",
"chars": 1418,
"preview": "var Symbol = require('./flowchart.symbol');\nvar inherits = require('./flowchart.helpers').inherits;\n\nfunction Subroutine"
},
{
"path": "src/jquery-plugin.js",
"chars": 2410,
"preview": "if (typeof jQuery != 'undefined') {\n\tvar parse = require('./flowchart.parse');\n\n\t(function( $ ) {\n\t\tfunction paramFit(ne"
},
{
"path": "types/index.d.ts",
"chars": 1022,
"preview": "declare module \"flowchart.js\" {\n namespace FlowChart {\n interface SVGOptions {\n x: number;\n y: number;\n "
},
{
"path": "webpack.config.js",
"chars": 2092,
"preview": "var path = require('path');\nvar webpack = require('webpack');\nvar moment = require('moment');\n\nvar component = require('"
}
]
About this extraction
This page contains the full source code of the adrai/flowchart.js GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 36 files (179.5 KB), approximately 47.3k tokens, and a symbol index with 41 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.