HTML5 canvas visual directed graph creation tool.
You can read about it here (Pt-br), take a look into the commented source code here and go through the examples bellow.
Here are the basic setup for the library. If you need/want to learn more, please refer to the docs
- 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" });
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;
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();
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 canvasbeforeRemoveLinkFrom
method allows you to subscribe to receive a notification whenever an element is about to get a link removed from itbeforeRemoveLinkTo
method allows you to subscribe to receive a notification whenever an element is about to get a link pointing to it
- The
- 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
[{
"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
}]
- 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
See LICENSE file