https://github.com/tsv2013/algorithm
Algorithm block diagram visualization and editing widget (jQuery+KnockoutJS)
https://github.com/tsv2013/algorithm
algorithm algorithm-block-diagram algorithm-visualization-widget block-diagram javascript knockoutjs visualization
Last synced: 4 months ago
JSON representation
Algorithm block diagram visualization and editing widget (jQuery+KnockoutJS)
- Host: GitHub
- URL: https://github.com/tsv2013/algorithm
- Owner: tsv2013
- License: mit
- Created: 2015-05-11T20:41:29.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2018-11-23T12:59:07.000Z (over 6 years ago)
- Last Synced: 2025-02-06T13:07:51.436Z (5 months ago)
- Topics: algorithm, algorithm-block-diagram, algorithm-visualization-widget, block-diagram, javascript, knockoutjs, visualization
- Language: TypeScript
- Homepage:
- Size: 269 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# tsvw-algorithm #
[](https://travis-ci.org/tsv2013/algorithm) [](https://coveralls.io/github/tsv2013/algorithm?branch=master) [](http://badge.fury.io/gh/tsv2013%2Falgorithm) [](http://badge.fury.io/bo/tsv-widget-algorithm) [](https://github.com/conventional-changelog/standard-version)
## Algorithm block diagram visualization and editing widget (jQuery+KnockoutJS) ##
## Live demo at: http://tsv2013.github.io/algorithm/ ##
[](https://npmjs.org/package/tsvw-algorithm)
##How to visualize algorithm block diagram
1. **Add the following markup to your page:**
```
```
2. **Define algorithm via JSON, for instance:**
```
var model = {
algorithm: {
items: [
{ id: 9, text: "finish" },
{ id: 6, text: "is condition true?" },
{ id: 3, text: "block is in progress", state: "inprogress" },
{ id: 7, text: "this block has a number", num: 1 },
{ id: 2, text: "this is a simple block with a very very content string" },
{ id: 1, text: "start", comment: "This is the start block." },
{ id: 4, text: "this block is completed", state: "completed" },
{ id: 5, text: "an intermediate block" },
{ id: 8, text: "pre-end simple block" },
],
transitions: [
{ iid: 1, exit1: 2, exit2: null },
{ iid: 2, exit1: 3, exit2: null },
{ iid: 2, exit1: 5, exit2: null },
{ iid: 3, exit1: 4, exit2: null },
{ iid: 4, exit1: 6, exit2: null },
{ iid: 5, exit1: 6, exit2: null },
{ iid: 6, exit1: 7, exit2: 8 },
{ iid: 7, exit1: 9, exit2: null },
{ iid: 8, exit1: 9, exit2: null },
]
}
};
```
3. **Bind model via KnockoutJS:**
```
ko.applyBindings(model);
```
##How to modify algorithm block diagram
While hovering mouse over algorithm blocks you will see control points to add blocks above and below, delete block and drag to link this block with other one.
##Building tsvw-algorithm from sources
1. **Clone the repo from GitHub**
```
git clone https://github.com/tsv2013/algorithm.git
cd algorithm
```
2. **Acquire build dependencies.** Make sure you have [Node.js](http://nodejs.org/) installed on your workstation. This is only needed to _build_ algorithm from sources.
```
npm install -g karma-cli
npm install
```
3. **Build the library**
```
npm run build
```
After that you should have the library at 'dist' directory.
4. **Run unit tests**
```
karma start
```
This command will run unit tests usign [Karma](https://karma-runner.github.io/0.13/index.html)