add readme and license

Author: ghostiam

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Maurizio Bonani
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,27 +1,230 @@
-# vue-blocks
+## Vue-Blocks
 
-> Vue2 
+### Basic usage
+
+``` html
+<template>
+  <div id="app">
+    <VueBlocksContainer
+      ref="container"
+      :blocksContent="blocks"
+      :scene.sync="scene"
+      class="container"/>
+  </div>
+</template>
+
+<script>
+  import VueBlocksContainer from '...path.../vue-blocks/src'
+
+  export default {
+    name: 'App',
+    components: {
+      VueBlocksContainer
+    },
+    data: function () {
+      return {
+        blocks: [
+          {
+            name: 'test',
+            title: 'Test block',
+            family: 'Test',
+            description: 'Description text',
+            fields: [
+              {
+                name: 'in1',
+                type: 'event',
+                attr: 'input'
+              },
+              {
+                name: 'in2',
+                type: 'event',
+                attr: 'input'
+              },
+              {
+                name: 'out1',
+                type: 'event',
+                attr: 'output'
+              },
+              {
+                name: 'out2',
+                type: 'event',
+                attr: 'output'
+              }
+            ]
+          }
+        ],
+        scene: {
+          blocks: [
+            {
+              id: 1,
+              x: 0,
+              y: 0,
+              name: 'test',
+              title: 'Test block',
+              values: {
+                property: [
+                  {
+                    name: 'message',
+                    type: 'string'
+                  }
+                ]
+              }
+            },
+            {
+              id: 2,
+              x: 0,
+              y: 50,
+              name: 'test',
+              title: 'Test block 2',
+              values: {
+                property: [
+                  {
+                    name: 'message',
+                    type: 'string'
+                  }
+                ]
+              }
+            }
+          ],
+          links: [],
+          container: {
+            centerX: 0,
+            centerY: 0,
+            scale: 1
+          }
+        }
+      }
+    }
+  }
+</script>
+
+
+<style>
+  html, body {
+    margin: 0;
+    padding: 0;
+  }
+
+  html {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  body,
+  #app,
+  .container {
+    width: 100%;
+    height: 100%;
+  }
+</style>
+```
+
+### Props
+
+#### blocksContent
+
+Type: `Array.<Node>`<br>
+Required: `true`<br>
+Default: `[]`
+
+Object `Node`:
+```
+{
+  name: 'name-node',
+  title: 'Title node',
+  family: 'family - just for grouping',
+  description: 'Description text',
+  fields: Array.<NodeField>
+}
+```
+
+Object `NodeField`: 
+```
+{
+  name: 'name',
+  type: 'type-name', // not used
+  attr: 'attribute' // input/output or custom
+  'other': - for custom
+}
+```
+
+Custom attributes are available in `scene.blocks[index].values.YourAttrName`
+
+#### scene
+
+Type: `Object`<br>
+Required: `false`<br>
+Default: 
+```
+{
+  blocks: [],
+  links: [],
+  container: {}
+}
+```
+
+Object `Scene`:
+```
+{
+  blocks: Array.<Block>,
+  links: Array.<BlockLinks>,
+  container: {
+   centerX: number
+   centerY: number
+   scale: number
+  }
+}
+```
+
+Object `Block`:
+```
+{
+  id: number,
+  x: number,
+  y: number,
+  name: string,
+  title: string,
+  values: {
+    customAttribute: [ // show "NodeField"
+      name: NodeField (without name and attr fields)
+    ]
+  }
+}
+```
+
+Object `BlockLinks`:
+```
+{
+  id: number, // ID
+  originID: number, // Origin block ID
+  originSlot: number, // Origin block slot number
+  targetID: number, // Target block ID
+  targetSlot: number // Target block slot number
+}
+```
 
 ## Build Setup
 
 ``` bash
 # install dependencies
-npm install
+yarn
 
 # serve with hot reload at localhost:8080
-npm run dev
+yarn dev
 
 # build for production with minification
-npm run build
+yarn run build
 
 # build for production and view the bundle analyzer report
-npm run build --report
+yarn run build --report
 
 # run unit tests
-npm run unit
+yarn run unit
 
 # run all tests
-npm test
+yarn test
 ```
 
-For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+## License
+
+[MIT license](LICENSE)