Skip to content

Algorithm block diagram visualization and editing widget (jQuery+KnockoutJS)

License

Notifications You must be signed in to change notification settings

tsv2013/algorithm

Repository files navigation

tsvw-algorithm

Build Status Coverage Status GitHub version Bower version Standard Version

Algorithm block diagram visualization and editing widget (jQuery+KnockoutJS)

NPM

##How to visualize algorithm block diagram

  1. Add the following markup to your page:

    <div data-bind="algorithm: { value: algorithm }"></div>
    
  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 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