escher.js 0.1.14 → 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.
 
@@ -186,13 +202,13 @@ class CustomObject extends Escher.Node
 	serialize(recursive)
 	{
 		var data = super.serialize(recursive);
-        data.something = this.something;
-        return data;
+		data.something = this.something;
+		return data;
 	}
     
 	parse(data, root)
 	{
-        super.parse(data, root);
+		super.parse(data, root);
 		this.something = data.something;
 	}
 }
@@ -212,6 +228,15 @@ constructor()
 }
 ```
 
+- Sometimes it might be necessary to access references to other objects in the group. It is recommended to store these relations by their UUID and rebuilding from the root object.
+
+```javascript
+parse(data, root)
+{
+	this.someObject = root.getChildByUUID(data.someObject);
+}
+```
+
 
 
 ### Pointer events