felipegtx / raska

:twisted_rightwards_arrows: HTML5 canvas visual directed graph creation tool (+pet animation and drawing framework)

HTML5 canvas visual directed graph creation tool.

What's this - exactly?

You can read about it here (Pt-br), take a look into the commented source code here and go through the examples bellow.

Usage

Here are the basic setup for the library. If you need/want to learn more, please refer to the docs

Basic setup

• Create a canvas element in your page

<canvas id="raskaContent" width="800" height="600"></canvas>

• Add raska.js library

<script type="text/javascript" src="src/raska.js"></script>

• Initialize it to a valid Canvas

raska.installUsing({ targetCanvasId: "raskaContent" });

Element tracking / repositioning

To create a circle, you can easily just do

var circle = raska.newCircle();

Don't forget to register it in the library in order to get it rendered. To do so, just call the plot method like so:

raska.plot(circle);

By keeping the reference to the element you can easily (re)define its properties (eg: its position) at any time without any further hassle. For example if you want it to move to the right you can just do:

circle.x += 10;

Animation

By using raska.animation you can easily set a new behaviour to your element.

 //// The raska animation
raska.animation.on(circle)

    /// Fade in the circle
     .fadeIn()
     
    /// Execute the animations in loop 
    ///     PS: here you can also provide an parameter to set the interval beteween animations
      .loop();

Public delegates / cutpoints

Raska' public interface provides a handlfull of helper delegates to allow you to proper control/handle the elements behaviour/interaction.

The delegates are the following:

• Any Raska element exposes
  • The on property
    • click method
    • release method
  • canLink delegate (customizable via override) allows you to control whether or not a new link can be stabilished between two elements.
  • isSerializable delegate (customizable via override) allows you to control whether or not a given element should be serialized as part of the JSON graph.
  • notifyDisableStateOn method allows you to subscribe to receive a notification whenever an element is about to get removed from the canvas
  • beforeRemoveLinkFrom method allows you to subscribe to receive a notification whenever an element is about to get a link removed from it
  • beforeRemoveLinkTo method allows you to subscribe to receive a notification whenever an element is about to get a link pointing to it

Examples

• Directed graph

  • Get a JSON from a canvas

    var stringJson = raska.getElementsString()

  • Load a JSON into the canvas

    /// load it back into the canvas
    raska.loadElementsFrom(stringJson);

  • Adding a subscriber for click iteractions on a given element (touchscreen friendly)

    triangle.on.click(function (x, y, e, ev) {
      console.log("You've clicked in this triangle", e);
    });

• Container

  • Tracking the mouse position

    raska.onCanvasInteraction("mousemove", /// this could also be 'click'
       function (evtData) {
         console.log("The mouse is moving", evtData);
       });

• Logo builder
• Animation
• A simple game
• Heatmap for calienteJS

Sample JSON graph data

[{
    "linksTo": ["circle__ff5e8210892115f6d96e874eb35571bf"],
    "childElements": ["label__6db884d155fd45405928523d1cbd1dd6"],
    "parent": null,
    "type": "circle",
    "name": "circle__28123e80e6068bc52bee1ab8d726ddad",
    "border": {
        "color": "gray",
        "active": true,
        "width": 2
    },
    "fillColor": "silver",
    "radius": 20,
    "attr": {},
    "graphNode": true,
    "position": 0,
    "x": 85.22943037974683,
    "y": 102.58964143426294
}, {
    "linksTo": [],
    "childElements": [],
    "parent": "circle__28123e80e6068bc52bee1ab8d726ddad",
    "type": "label",
    "name": "label__6db884d155fd45405928523d1cbd1dd6",
    "graphNode": false,
    "text": "Start",
    "color": "gray",
    "x": 0,
    "y": 0,
    "border": {
        "color": "white",
        "active": true,
        "width": 2
    },
    "font": {
        "family": "Arial",
        "size": "12px",
        "decoration": ""
    },
    "attr": {},
    "position": 0
}, {
    "linksTo": [],
    "childElements": ["label__f22ea400baa01ddebcbc88ffcb7e09d4"],
    "parent": null,
    "type": "circle",
    "name": "circle__ff5e8210892115f6d96e874eb35571bf",
    "border": {
        "color": "gray",
        "active": true,
        "width": 2
    },
    "fillColor": "silver",
    "radius": 20,
    "attr": {},
    "graphNode": true,
    "position": 0,
    "x": 309.0189873417722,
    "y": 107.56972111553785
}, {
    "linksTo": [],
    "childElements": [],
    "parent": "circle__ff5e8210892115f6d96e874eb35571bf",
    "type": "label",
    "name": "label__f22ea400baa01ddebcbc88ffcb7e09d4",
    "graphNode": false,
    "text": "Done!",
    "color": "gray",
    "x": 0,
    "y": 0,
    "border": {
        "color": "white",
        "active": true,
        "width": 2
    },
    "font": {
        "family": "Arial",
        "size": "12px",
        "decoration": ""
    },
    "attr": {},
    "position": 0
}]

Roadmap

• Visual tool to create Directed graphs
  • Square
  • Triangle
  • Circle
  • Arrow
  • Custom shape drawing tool
• Add/Remove elements programatically
• Add/Remove elements' links programatically
• Generic collision/click check algorithm
• Animation library
  • FadeIn effect
  • FadeOut effect
  • Move effect
• Save to image
• Export to JSON
• Import from JSON
• Fullscreen mode
• Go/back from fullscreen
• Automatically adapt to screen size changes (when in fullscreen)
• Element properties panel
• Unity tests

License

See LICENSE file

raska's Issues

Automatically adapt to screen size changes (when in fullscreen)

Unit test

Custom shape drawing tool

Element properties panel