escher.js 0.1.15 → 0.1.17

package/README.md

@@ -1,8 +1,10 @@
 # escher.js
 [![npm version](https://badge.fury.io/js/escher.js.svg)](https://badge.fury.io/js/escher.js)[![GitHub version](https://badge.fury.io/gh/tentone%2Fescher.js.svg)](https://badge.fury.io/gh/tentone%2Fescher.js)[![GitHub stars](https://img.shields.io/github/stars/tentone/escher.js.svg)](https://github.com/tentone/escher.js/stargazers)
 
- - Web based 2D graph building framework.
- - Entity based diagram build system, entities are stores as a tree. Compose complex animated canvas objects using parent-children transforms.
+ - Web based 2D graphics framework on top of the canvas API.
+ - Entity based diagram build system, entities are stores as a tree.
+ - Interactive 2D graphics with complex pointer events and viewport controls.
+ - Compose complex animated canvas objects using parent-children transforms.
  - Extensible using already existing canvas based visualization libs. 
  - Base objects boxes, circle, custom shapes, lines, that can be used to compose more complex objects.
  - Support for DOM elements using CSS transforms (Useful for text input and more complex user interaction).
@@ -11,7 +13,6 @@
 ![graph](<https://tentone.github.io/escher.js/readme/example.png>)
 
 
-
 ### Examples / Documentation
 
 - Sometimes the best way to learn about something is to try it yourself, there are a couple of example in the example folder in the Git repository. They can be used as base for your project.
@@ -77,11 +78,26 @@ group.add(circle);
 var viewport = new Escher.Viewport(canvas);
 
 var renderer = new Escher.Renderer(canvas);
+
 renderer.createRenderLoop(group, viewport);
 ```
 
 ![graph](<https://tentone.github.io/escher.js/readme/hello.png>)
 
+- Alternatively you can create the render loop manually, the render loop should be called at the same rate as the screen is refreshed using the [requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) method or a `AnimationTimer` object from the library.
+
+```javascript
+var renderer = new Escher.Renderer(canvas);
+var controls = new ViewportControls(viewport);
+
+var timer = new AnimationTimer(function()
+{
+    controls.update(renderer.pointer);
+    renderer.update(group, viewport);
+});
+timer.start();
+```
+
 - If the application is not running a full screen canvas there might be some problems with the page scrolling around or showing context menu while interacting to prevent this we can disable/prevent these browser events.
   - In the example we use the `EventManager` object to create and manage these events but we could also create these directly attached to the DOM elements.