GO JS for HTML5 Canvas | Lessoncup Programming Blog

Monday, 14 October 2013

GO JS for HTML5 Canvas

on research for some technologies i found Gojs it is for html5 canvas after some study on this i got few things and i want to share this to my readers. GoJS is a JavaScript library that lets you easily create interactive diagrams in modern web browsers. GoJS supports graphical templates and data-binding of graphical object properties to model data.





Only the model, consisting of simple JavaScript objects, needs to be saved and restored. Many predefined tools and commands implement the standard behaviors that most diagrams need. Customization of appearance and behavior is mostly a matter of setting properties.


You can pan, scroll, select, delete, and undo operations in this Diagram.

Here is an enhanced example that displays nodes, links, and groups. It also allows the user to manipulate them.

Some Featues as i know

You can select a part by clicking on it.

Selected nodes are highlighted with an Adornment that is a magenta rectangle surrounding the node.

Selected links are highlighted with a magenta line following the path of the link.

Multiple parts may be selected at once.

Hold the shift key down when clicking to add to the selection.

Hold the control key down when clicking to toggle whether that part is selected.

Another way to multi-select is to mouse-down at a point in the background (not on a part), wait a moment, and then drag a box.

Parts that are in the box when the mouse-up occurs are selected.

Ctrl-A selects all parts in the diagram.

Move one or more parts by selecting them and dragging.

Copying works with either Ctrl-mouse-drag or with copy/paste (Ctrl-C/Ctrl-V).

Delete selected parts with the Delete key.

Select several parts and group them together with the Ctrl-G command;

you can ungroup with the Ctrl-Shift-G command.

If scrollbars are visible or if the whole collection of parts is smaller than the viewable area of the diagram (the "viewport"), you can pan the diagram with a mouse-down in the background (not on a part) if you drag without waiting.

Draw new Links by dragging from the inner edge of a Node's Shape.

Reconnect an existing Link by selecting a Link and dragging one of its diamond handles.

Cotent reference form http://gojs.net/latest/intro/index.html

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons