tko.flowchartdesigner

Javascript Library to easily create flowcharts with drag/drop functionality based on the awesome library Raphael JS .

Tested with current versions of Edge, IE, Chrome, Firefox

DEMO

#Getting started

##1. Set references ###css

    <link rel="stylesheet" href="../dist/tko.flowchartdesigner.css" type="text/css" />

###javascript

    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <script src="../Scripts/raphael-min.js"></script>
    <script src="../dist/tko.flowchartdesigner.js"></script>

##2. Create Flowchart

###html

    <div id="myCanvas" class="flowchart_canvas" tabindex="1">
        <!--Tabindex=1 to get the keydown-event for that div-->
    </div>

In this example I used this css for the canvas-div.

    .flowchart_canvas{
        border: solid 1px #333;
        background-color: #e0e0e0;
        width: 100%;
        height: 3000px;
    }

###javascript

    var options = new flowchart.FlowChartOptions();
    var wc = new flowchart.FlowChart("myCanvas",options);

###Options the following options are available to customize the flowchart

//connection-types
    //curved
    options.ShapeConnectionType = constants.ConnectionDrawerType.Curved;
    //straight
    options.ShapeConnectionType = constants.ConnectionDrawerType.Straight;

//colors
    //Shape
    options.Colors.ShapeSelected = "blue";

    //Connection
    options.Colors.ConnectionSelected = "blue";

    //connectionpoints
    options.Colors.ConnectionPointIncoming = "white";
    options.Colors.ConnectionPointTrueSuccess = "green";
    options.Colors.ConnectionPointFalseError = "red";

everything else can be changed within the css-file tko.flowchartdesigner.css.

##3. Add Shapes ###Create shapes

    var s0 = new flowchart.shape.Terminal("0", 150, 50, "Start");
    var s1 = new flowchart.shape.Process("1", 150, 70, "Do something");
    var s2 = new flowchart.shape.Decision("2", 100, 100, "Ok?");
    var s3 = new flowchart.shape.Process("3", 150, 70, "<div style='color:green'>Yes</div>");
    var s4 = new flowchart.shape.Process("4", 150, 70, "No");
    var s5 = new flowchart.shape.Terminal("5", 150, 50, "End");

Parameter

1. unique id.

2. width in px

3. height in px

4. Simple text or HTML-Text

###Add ConnectionPoints to the shapes

    var cType = flowchart.constants.ConnectionPointType; //to avoid to much typing ;-)
    
    s0.AddConnectionPoints([
        new flowchart.shape.ConnectionPoint(cType.OutgoingTrueSuccess, cPos.Bottom)
    ]);

    s1.AddConnectionPoints([
        new flowchart.shape.ConnectionPoint(cType.Incoming, cPos.Top),
        new flowchart.shape.ConnectionPoint(cType.Incoming, cPos.Left),
        new flowchart.shape.ConnectionPoint(cType.OutgoingFalseError, cPos.Right),
        new flowchart.shape.ConnectionPoint(cType.OutgoingTrueSuccess, cPos.Bottom)
    ]);
    ...

Every shape can have up to 4 connection-points. they are located left,top,right,bottom.

Parameter

1. Type-Enum, if its an incoming,outgoing(succes) or outgoing(error)

2. Position-Enum, where to add the connectionpoint (left,top,right,bottom)

###Add Shapes to the canvas

    wc.AddShape(s0, 350, 30);
    wc.AddShape(s1, 350, 110);
    wc.AddShape(s2, 375, 220);
    wc.AddShape(s3, 470, 330);
    wc.AddShape(s4, 240, 330);
    wc.AddShape(s5, 350, 440);

Adds the shape to the canvas.

Parameter

1. the shape-object we created above

2. PosX in px

3. PosY in px

##4. Connect Shapes

    wc.ConnectShapes(s0, s1, cPos.Bottom, cPos.Top);
    wc.ConnectShapes(s1, s2, cPos.Bottom, cPos.Top);
    wc.ConnectShapes(s2, s3, cPos.Right, cPos.Top);
    wc.ConnectShapes(s2, s4, cPos.Left, cPos.Top);
    wc.ConnectShapes(s3, s5, cPos.Bottom, cPos.Top);
    wc.ConnectShapes(s4, s5, cPos.Bottom, cPos.Top);

Connects the shapes with a line.

Parameter

1. Shape-Object FROM

2. Shape.Object TO

3. ConnectionPoint-Position FROM

4. ConnectionPoint-Position TO

##5. Events

###Available events

    flowchart.constants.EventType.AfterConnectionCreated
    flowchart.constants.EventType.OnClick
    flowchart.constants.EventType.OnDoubleClick
    flowchart.constants.EventType.BeforeDelete
    flowchart.constants.EventType.AfterDelete
    flowchart.constants.EventType.BeforeShapeMoved
    flowchart.constants.EventType.AfterShapeMoved
    flowchart.constants.EventType.BeforeSelect
    flowchart.constants.EventType.AfterSelect
    flowchart.constants.EventType.BeforeUnselect
    flowchart.constants.EventType.AfterUnselect

###Add event listener

    wc.AddEventListener(flowchart.constants.EventType.BeforeConnectionCreated, function (event){

        return confirm("Do you really want to create this connection?");
    });
    ...

###"Before"-Events If you listen to an "before"-event you can simply abort this current action by returning false. The after-code will not be executed then. Only exception: BeforeShapeMoved.

##6. Save as JSON You can get the complete flowchart as a json-object. this object can later be used to load the flowchart again using the Load-Method.

var json = wc.Export();

##7. Load from JSON If you want to load a complete flowchart from your code you can call the Load-Method. this will need the json-object (from the Export-Method) as parameter.

  wc.Load(savedModel);