Migrating away from AngularJS

.gitignore

@@ -1,12 +1,4 @@
-logs/*
-!.gitkeep
+.idea/
+dist/
 node_modules/
-bower_components/
-tmp
-.DS_Store
-.idea
-desktop.ini
-.travis.yml
-npm-debug.log
-src/app/TILDOCS-#40699695-v1-ùàâ æëåëàì.docx
-*.docx
+coverage/

BLOG.md

@@ -0,0 +1,49 @@
+# Revisiting Force-Horse: Making a Legacy Plugin Agnostic and Usable
+For a long while, we at the company used our own AngularJS D3.js library for graphs visualizations of real-life data sets, called "[Force-Horse](https://github.com/Webiks/force-horse)".
+
+Force-Horse is an open source Javascript component wrapping a Force Layout and adding some functionalities we found very useful, like Adaptive tuning of forces and constraints parameters, Adaptive rendering cycle, Play/Pause the simulation, Multiple edges between two nodes, Weight the nodes and the edges, etc...
+
+![Force Horse](http://webiks.com/wp-content/uploads/2016/07/force_horse-768x441.png)
+
+While you can read all of the details on the library in Ram's [blog post](http://webiks.com/force-horse-force-layout-component/), the gist of it is having a library that adapts to many types of data sets, and is easily modifiable for the users, having many modes for nodes, D3.js forces, multiple edges between nodes, supporting any size of data set, and easily allowing customization of the base SVG's design.
+
+## So... What's New?
+Having the library written using AngularJS, forces the user to use a deprecated framework. Either the user thinks they can just include AngularJS in the bundle, increasing the bundle, or trying to implement the component for their used framework.
+Therefore, we decided to remove the dependency for AngularJS, making the library framework agnostic.
+
+##### Agnostification
+Therefore, we decided  to remove the dependency, migrating AngularJS out of the library, moving to a standard browser feature - [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements), supported by most browsers, or being worked on at this time (In case it isn't supported, there is a tiny browser polyfill - [see support](https://caniuse.com/#search=custom%20elements%20v0))
+What’s good about using Custom Elements, is that all of the main frameworks - Angular, React, Vue, Polymer etc.. - support it for bindings of inputs and outputs, but you don't have to use a framework to use it.
+
+##### Integration
+We also made the component much easier to integrate, now creating 2 bundles - one for Javascript and one for CSS - and loading the images as a base64 mask directly inside the CSS, so there is no need when creating a distribution build to copy our assets anymore, just importing our CSS.
+
+##### Tests
+The original AngularJS component did not have many tests, so we could not ensure it was working for every user. Now, we added many unit tests for many use cases, to cover all of the grounds we need to be confidant in the stability of this awesome component.
+
+##### Standards
+It's 2017, so we ditched the old ES5 syntax, migrating the entire Javascript code base to ES6, taking advantage of the great things it offers.
+Also, we moved from CSS to SCSS, for better style management and versatility.
+
+## New Usage
+### Loading:
+With a modules bundler (recommended):
+```js
+import 'force-horse'; // Imports the web component, not compiled
+```
+```scss
+@import 'force-horse'; // Imports the SCSS index file
+```
+Directly from HTML:
+```html
+<link rel="stylesheet" type="text/css" href="node_modules/force-horse/dist/style.bundle.css" />
+<script type="application/javascript" src="node_modules/force-horse/dist/main.bundle.js"></script>
+```
+### Using:
+```html
+<force-horse options='{"json": "options"}'></force-horse>
+```
+
+### Wanna Help?
+Working on something similar? [Contribute to our GitHub project](https://github.com/webiks/force-horse)
+Thinking we can improve? [Let us know](https://github.com/webiks/force-horse/issues)

README.md

@@ -1,20 +1,21 @@
 # force-horse
 
-An angular.js wrapper for a d3.js force fayout
-
 #### USAGE
 
-force-horse is implemented as an angular.js 1.4 directive. It can be used either as an HTML element or as an HTML element attribute.
+force-horse is implemented as a web component, so you can use it as an element:
+
+`<force-horse></force-horse>`
 
-`<force-horse options=”ctrl.options”&gt;&lt;/force-horse>`
+or from JS:
 
-or:
+`document.createElement('force-horse')`
 
-`<div force-horse options=”ctrl.options”></div>`
+To be rendered, force-horse must first get `options`, which is an attribute.
 
-A force-horse element does not have an intrincsic size. It adapts itself to the size that is set by its parent. force-horse is implementing CSS **flex-box** display logic.
+A force-horse element does not have an intrinsic size. It adapts itself to the size that is set by its parent.
+force-horse is implementing CSS **flex-box** display logic.
 
-#  Options parameters
+#  Options attribute
 
 Parameters are passed through the options attribute. Currently, this object contains only the data property, which holds the graph's data in the following format:
 
@@ -27,24 +28,33 @@ Parameters are passed through the options attribute. Currently, this object co
 ```
 
 # API
-After initializing the directive, force-horse inserts an object into the `options` object sent to it.  This **`forceHorseInstance`** holds inside the force horse API methods. There is one **`forceHorseInstance`** per directive initialized:
+After initializing the directive, force-horse inserts an object into the `options` object sent to it.
+This **`forceHorseInstance`** holds inside the force horse API methods. There is one **`forceHorseInstance`** per directive initialized:
+
+To use it, simply find the instance of `force-horse`, and call `element.instance`
 
-**addEventListener** - accepts an event name (String) and a callback (function). For a list of events see **Events** section below.
+# Outputs
 
+Outputs are event emitters. You can subscribe and unsubscribe in the following way:
+```
+const instance = element.instance;
+const subscription = instance.hoverEvent.subscribe(() => { /* some callback */);
+subscription.unsubscribe();
+```
 
-# Events
+These are the current events. PR's and suggestions for more are welcome:
+**ready** (`readyEvent`): an SVG is drawn and ready
 
-These are the current events. PR's and suggestiong for more are welcome:
-**hover**: a node/link is hovered upon
+**hover** (`hoverEvent`): a node/link is hovered upon
 
-**select**: a node/link is selected
+**select** (`selectEvent`): a node/link is selected
 
-**dblclick**: a node/link is double-clicked upon
+**dblclick** (`doubleClickEvent`): a node/link is double-clicked upon
 
-**filter**: remove the selected nodes/links from the graph
+**filter** (`filterEvent`): remove the selected nodes/links from the graph
 
 # External Config file
-force-horse supports an external json file, **forceHorse.json**. In this file one can set whether each of the buttons (see below) is displayed or not. 
+force-horse supports an external json file, **forceHorse.json**. In this file one can set whether each of the buttons (see below) is displayed or not.
 Also, force layout parameters can be set, and thus to override the parameters that force-horse computes automatically, for a specific implementation.
 
 The config parameters are:
@@ -57,7 +67,6 @@ The config parameters are:
   "showLabelsButton": true, // show the labels toggle button
   "showNodeWeightButton": true,  // show the nodes weights toggle button
   "showEdgeWeightButton": true, // show the edges weights toggle button
-  "useEdgesWeights": false, //weather to use edges weights or simple edge sum for node weights
   "forceParameters": {
     "charge": -350,
     "linkStrength": 1,
@@ -86,14 +95,13 @@ In addition, force-horse is providing the following buttons:
 
 #### DEPENDENCIES
 
-The only dependencies of force-horse are:
-* **angular.js** v1.4
+The only dependency of force-horse is:
 * **d3.js** v4
 
 #### PERFORMANCE
 
 force-horse was designed for high performance. Some of the measures in use are:
-* minimal use of angular **$watch**’es
+* minimal use of DOM manipulations
 * large graphs are not rendered continuously, but only a few times during the force simulation. The screen rendering is controlled programmatically, implementing javascript**requestAnimationFrame**(). A thin **progress bar** is displayed, during a force simulation, so that even if rendering is held, the user can know the stage and the pace of the current force simulation.
 
 #### MULTIPLE LINKS BETWEEN TWO NODES
@@ -102,4 +110,5 @@ The ability to compute multiple, parallel link between two nodes is not currentl
 
 #### CONSOLE MESSAGES
 
-Set localStorage.setItem('forceHorse', 'on') to get informative console messages from force-horse.
+Set `localStorage.setItem('force-horse', true)` to get informative console messages from force-horse.
+To turn it off, remove that item by doing `localStorage.removeItem('force-horse')`