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 ================================================ [![JS.ORG](https://img.shields.io/badge/js.org-flowchart-ffb400.svg?style=flat-square)](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 ``` ![Example Flowchart](/imgs/example.svg) ## 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`. ![start image](imgs/start.png "start image") ```flowchart st=>start: start ``` ### end Used as the last node where a flow ends. Default text is `End`. ![end image](imgs/end.png "end image") ```flowchart e=>end: end ``` ### operation Indicates that an operation needs to happen in the flow. ![operation image](imgs/operation.png "operation image") ```flowchart op1=>operation: operation ``` ### inputoutput Indicates that IO happens in a flow. ![inputoutput image](imgs/inputoutput.png "inputoutput image") ```flowchart io=>inputoutput: inputoutput ``` ### input Indicates that Input happens in a flow. ![input image](imgs/input.png "input image") ```flowchart getInfo=>input: Input info ``` ### output Indicates that Output happens in a flow. ![output image](imgs/output.png "output image") ```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. ![subroutine image](imgs/subroutine.png "subroutine image") ```flowchart sub1=>subroutine: subroutine ``` ### condition Allows for a conditional or logical statement to direct the flow into one of two paths. ![condition image](imgs/condition.png "condition image") ```flowchart cond=>condition: condition Yes or No? ``` ### parallel Allows for multiple flows to happen simultaneously. ![parallel image](imgs/parallel.png "parallel image") ```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: `[([, [[([, ]` 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. `` 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()->nextNode` ### end No specifications because connections only go to the end node and do not leave from it. `previousNode->endVar` ### operation Optional direction `operationVar()->nextNode` ### inputoutput Optional direction `inputoutputVar()->nextNode` ### subroutine Optional direction `subroutineVar()->nextNode` ### condition Required logical specification of `yes` or `no` Optional direction ```flowchart conditionalVar(yes, )->nextNode1 conditionalVar(no, )->nextNode2 ``` ### parallel Required path specification of `path1`, `path2`, or `path3` Optional direction ```flowchart parallelVar(path1, )->nextNode1 parallelVar(path2, )->nextNode2 parallelVar(path3, )->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 ```
Demonstration ![img](https://user-images.githubusercontent.com/1086194/137810516-0d7d7307-fc55-466f-b06d-a6ca9f6b8785.png)
## 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 ================================================ flowchart.js · Playground
================================================ FILE: example/loadFile.html ================================================ flowchart.js · Playground
================================================ 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 ================================================ Demo page
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
================================================ 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 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 { /** Stymbol Styles */ symbols?: Record>; /** FlowState config */ flowstate?: Record>; } 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;