Skip to content

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

License

Notifications You must be signed in to change notification settings

felipegtx/Raska

Repository files navigation

Raska

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
    • 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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published