vor 7 Jahren · 19c66c4d4c
--- a/DIST/flowserver
+++ b/DIST/flowserver
--- a/DIST/web/index.html
+++ b/DIST/web/index.html
@@ -0,0 +1,10 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <title>Flow</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="app"></div>
			
 
				+  <script type="text/javascript" src="/index.js"></script></body>
			
 
				+</html>
			
--- a/DIST/web/index.js
+++ b/DIST/web/index.js
--- a/DIST/web/index.js.map
+++ b/DIST/web/index.js.map
--- a/Makefile
+++ b/Makefile
@@ -0,0 +1,20 @@
 
				+
			
 
				+.PHONY: all backend frontend clean
			
 
				+
			
 
				+all:frontend backend
			
 
				+	mkdir -p DIST
			
 
				+
			
 
				+clean:
			
 
				+	rm -rf DIST
			
 
				+
			
 
				+backend:
			
 
				+	cd go;make
			
 
				+	cp go/DIST/* DIST
			
 
				+
			
 
				+frontend:
			
 
				+	mkdir -p DIST/web
			
 
				+	cd browser/vue-flow;yarn build
			
 
				+	cp -r browser/vue-flow/dist/* DIST/web
			
 
				+
			
 
				+
			
 
				+
			
--- a/browser/vue-flow/docker/Caddyfile
+++ b/browser/vue-flow/docker/Caddyfile
@@ -0,0 +1,7 @@
 
				+flow.hexasoftware.com {
			
 
				+	tls off
			
 
				+	rewrite / {
			
 
				+		regexp ^[^.]*$
			
 
				+		to /index.html
			
 
				+	}
			
 
				+}
			
--- a/browser/vue-flow/docker/Dockerfile
+++ b/browser/vue-flow/docker/Dockerfile
@@ -0,0 +1,6 @@
 
				+FROM joshix/caddy
			
 
				+COPY dist/ /var/www/html
			
 
				+COPY docker/Caddyfile /var/www/html
			
 
				+WORKDIR /var/www/html
			
 
				+EXPOSE 2015
			
 
				+CMD ["/bin/caddy"]
			
--- a/browser/vue-flow/docker/docker.sh
+++ b/browser/vue-flow/docker/docker.sh
@@ -0,0 +1,2 @@
 
				+docker build --rm -t hexasoftware.com:5000/flow-proto -f ./docker/Dockerfile ..
			
 
				+docker push hexasoftware.com:5000/flow-proto
			
--- a/browser/vue-flow/index.html
+++ b/browser/vue-flow/index.html
@@ -6,6 +6,5 @@
 
				   </head>
			
 
				   <body>
			
 
				     <div id="app"></div>
			
 
				-    <script src="/dist/build.js"></script>
			
 
				   </body>
			
 
				 </html>
			
--- a/browser/vue-flow/package.json
+++ b/browser/vue-flow/package.json
@@ -6,6 +6,8 @@
 
				   "license": "MIT",
			
 
				   "private": true,
			
 
				   "scripts": {
			
 
				+    "docker": "docker build --rm -t hexasoftware.com:5000/flow-proto -f ./docker/Dockerfile .",
			
 
				+    "docker-pull": "docker push hexasoftware.com:5000/flow-proto",
			
 
				     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
			
 
				     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
			
 
				   },
			
@@ -19,6 +21,7 @@
 
				   ],
			
 
				   "devDependencies": {
			
 
				     "babel-core": "^6.26.0",
			
 
				+    "babel-eslint": "^8.2.1",
			
 
				     "babel-loader": "^7.1.2",
			
 
				     "babel-preset-env": "^1.6.0",
			
 
				     "babel-preset-stage-3": "^6.24.1",
			
@@ -27,6 +30,8 @@
 
				     "eslint": "^4.14.0",
			
 
				     "eslint-config-node": "^2.0.0",
			
 
				     "eslint-config-standard": "^11.0.0-beta.0",
			
 
				+    "eslint-plugin-babel": "^4.1.2",
			
 
				+    "eslint-plugin-import": "^2.8.0",
			
 
				     "eslint-plugin-node": "^5.2.1",
			
 
				     "eslint-plugin-promise": "^3.6.0",
			
 
				     "eslint-plugin-standard": "^3.0.1",
			
@@ -36,8 +41,10 @@
 
				     "flow-bin": "^0.62.0",
			
 
				     "html-webpack-plugin": "^2.30.1",
			
 
				     "node-sass": "^4.5.3",
			
 
				+    "reset-css": "^2.2.1",
			
 
				     "sass-loader": "^6.0.6",
			
 
				     "vue-loader": "^13.0.5",
			
 
				+    "vue-router": "^3.0.1",
			
 
				     "vue-template-compiler": "^2.4.4",
			
 
				     "webpack": "^3.6.0",
			
 
				     "webpack-dev-server": "^2.9.1"
			
--- a/browser/vue-flow/src/App.vue
+++ b/browser/vue-flow/src/App.vue
@@ -1,20 +1,12 @@
 
				 <template>
			
 
				   <div id="app">
			
 
				-    <h3>An app with svg</h3>
			
 
				-    <flow-manager
			
 
				-      width="100%"
			
 
				-      height="100%"/>
			
 
				+    <router-view/>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				-import FlowManager from '@/components/flowmanager'
			
 
				-
			
 
				 export default {
			
 
				-  name: 'App',
			
 
				-  components: {
			
 
				-    'FlowManager': FlowManager
			
 
				-  }
			
 
				+  name: 'App'
			
 
				 }
			
 
				 </script>
			
 
				 
			
@@ -29,8 +21,8 @@ html,body {
 
				   max-width:100%;
			
 
				   max-height:100%;
			
 
				 }
			
 
				-
			
 
				 #app {
			
 
				+  background: #f4f4f4;
			
 
				   position:relative;
			
 
				   padding:0;
			
 
				   display:flex;
			
@@ -41,9 +33,4 @@ html,body {
 
				   -moz-osx-font-smoothing: grayscale;
			
 
				   color: #2c3e50;
			
 
				 }
			
 
				-
			
 
				-#app .flow-container {
			
 
				-  flex:1;
			
 
				-}
			
 
				-
			
 
				 </style>
			
--- a/browser/vue-flow/src/assets/style.css
+++ b/browser/vue-flow/src/assets/style.css
@@ -0,0 +1,25 @@
 
				+h4 {
			
 
				+  margin: 2px 0 8px 0;
			
 
				+  font-weight: bold;
			
 
				+}
			
 
				+
			
 
				+button {
			
 
				+  outline: none;
			
 
				+  cursor: pointer;
			
 
				+  background: #ccc;
			
 
				+  border: none;
			
 
				+  color: #333;
			
 
				+  margin: 2px 0 2px 2px;
			
 
				+  padding: 10px;
			
 
				+  transition: all 0.3s;
			
 
				+}
			
 
				+
			
 
				+button:hover {
			
 
				+  background: #b1b1b1;
			
 
				+}
			
 
				+
			
 
				+ul {
			
 
				+  margin-left: 10px;
			
 
				+  padding-left: 15px;
			
 
				+  list-style: disc;
			
 
				+}
			
--- a/browser/vue-flow/src/components/flowlink.vue
+++ b/browser/vue-flow/src/components/flowlink.vue
@@ -1,8 +1,8 @@
 
				 <template>
			
 
				-  <g class="flow-link">
			
 
				+  <g class="flow-link" @click="$emit('click',$event)">
			
 
				     <path
			
 
				       class="flow-link__area"
			
 
				-      d:="path"
			
 
				+      :d="path"
			
 
				     />
			
 
				     <path
			
 
				       class="flow-link__visible"
			
@@ -11,6 +11,7 @@
 
				   </g>
			
 
				 </template>
			
 
				 <script>
			
 
				+const s = 60
			
 
				 export default {
			
 
				   name: 'FlowLink',
			
 
				   props: {
			
@@ -21,7 +22,7 @@ export default {
 
				   },
			
 
				   computed: {
			
 
				     path () {
			
 
				-      return `M${this.x1},${this.y1} C${this.x1 + 50},${this.y1} ${this.x2 - 50},${this.y2} ${this.x2},${this.y2}`
			
 
				+      return `M${this.x1},${this.y1} C${this.x1 + s},${this.y1} ${this.x2 - s},${this.y2} ${this.x2},${this.y2}`
			
 
				     }
			
 
				   }
			
 
				 }
			
@@ -33,11 +34,11 @@ export default {
 
				 .flow-link .flow-link__area {
			
 
				   stroke-width:20;
			
 
				   stroke: transparent;
			
 
				-  fill:none;
			
 
				+  fill: transparent;
			
 
				 }
			
 
				 .flow-link .flow-link__visible{
			
 
				   stroke: rgba(0,0,0,0.5);
			
 
				-  stroke-width:5;
			
 
				+  stroke-width:4;
			
 
				   stroke-linecap:round;
			
 
				   fill: transparent;
			
 
				 }
			
--- a/browser/vue-flow/src/components/flow/manager.vue
+++ b/browser/vue-flow/src/components/flow/manager.vue
@@ -0,0 +1,297 @@
 
				+<template>
			
 
				+  <div class="flow-container">
			
 
				+    <div>
			
 
				+      fn:
			
 
				+      <button
			
 
				+        :key="i"
			
 
				+        v-for="(r,k,i) of nodeData.registry"
			
 
				+        @click="nodeAdd(r)">
			
 
				+        {{ k }}
			
 
				+      </button>
			
 
				+    </div>
			
 
				+    <svg
			
 
				+      ref="svg"
			
 
				+      class="view"
			
 
				+      :width="width"
			
 
				+      :height="height">
			
 
				+      <flow-pan-zoom
			
 
				+        ref="panzoom"
			
 
				+        v-model="nodeData.panzoom">
			
 
				+        <flow-link
			
 
				+          v-for="(l,i) in nodeData.links"
			
 
				+          :key="i"
			
 
				+          v-bind="linkProps(l)"
			
 
				+          @click="removeLink(i)"
			
 
				+        />
			
 
				+        <!-- mouse link-->
			
 
				+        <flow-link
			
 
				+          v-if="pointerLink.active"
			
 
				+          v-bind="pointerLink.props"
			
 
				+        />
			
 
				+        <flow-node
			
 
				+          ref="nodes"
			
 
				+          v-for="(n,i) of nodeData.nodes"
			
 
				+          v-bind="nodeProps(n)"
			
 
				+          :key="'node' + n.id"
			
 
				+          :id="n.id"
			
 
				+          @nodePointerDown.prevent="nodeDragStart($event,i)"
			
 
				+          @socketPointerDown="socketPointerDown(n.id,...arguments)"
			
 
				+        />
			
 
				+      </flow-pan-zoom>
			
 
				+    </svg>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+import nodeData from '../nodedata'
			
 
				+import FlowNode from './node'
			
 
				+import FlowLink from './link'
			
 
				+import FlowPanZoom from './panzoom'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'FlowManager',
			
 
				+  components: {FlowNode, FlowLink, FlowPanZoom},
			
 
				+  props: {
			
 
				+    'width': {type: String, default: '800px'},
			
 
				+    'height': {type: String, default: '600px'}
			
 
				+  },
			
 
				+  data () {
			
 
				+    return {
			
 
				+      nodeData: nodeData,
			
 
				+      pointerLink: {active: false, props: {}, src: {}}
			
 
				+    }
			
 
				+  },
			
 
				+  computed: {
			
 
				+    nodeProps () {
			
 
				+      return (node) => {
			
 
				+        let match = {}
			
 
				+        if (this.pointerLink.active && this.pointerLink.src.nodeId !== node.id) {
			
 
				+          if (this.pointerLink.src.in !== undefined) {
			
 
				+            match = {out: this.pointerLink.src.type}
			
 
				+          } else {
			
 
				+            match = {in: this.pointerLink.src.type}
			
 
				+          }
			
 
				+        }
			
 
				+        const nodeClass = this.nodeData.registry[node.src]
			
 
				+        return {
			
 
				+          transform: `translate(${node.x} ${node.y})`,
			
 
				+          id: node.id,
			
 
				+          label: node.label,
			
 
				+          type: nodeClass.type,
			
 
				+          inputs: nodeClass.inputs,
			
 
				+          output: nodeClass.output,
			
 
				+          match: match,
			
 
				+          color: nodeClass.style && nodeClass.style.color,
			
 
				+          textColor: nodeClass.style && nodeClass.style.textColor
			
 
				+        }
			
 
				+      }
			
 
				+    },
			
 
				+    linkProps () {
			
 
				+      return (link) => {
			
 
				+        if (!this.$refs.nodes) return
			
 
				+        // For size .x .y
			
 
				+        const nodeFrom = this.nodeData.nodes.find(n => n.id === link.from)
			
 
				+        const nodeTo = this.nodeData.nodes.find(n => n.id === link.to)
			
 
				+
			
 
				+        const refFrom = this.$refs.nodes.find(n => n.id === link.from)
			
 
				+        const refTo = this.$refs.nodes.find(n => n.id === link.to)
			
 
				+
			
 
				+        const fromOutput = refFrom.outputPos(0) // only 1 output
			
 
				+        const toInput = refTo.inputPos(link.in)
			
 
				+
			
 
				+        return {
			
 
				+          x1: nodeFrom.x + fromOutput.x,
			
 
				+          y1: nodeFrom.y + fromOutput.y,
			
 
				+          x2: nodeTo.x + toInput.x,
			
 
				+          y2: nodeTo.y + toInput.y
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+  },
			
 
				+  mounted () {
			
 
				+    this.$nextTick(() => {
			
 
				+      this.$forceUpdate()
			
 
				+    })
			
 
				+  },
			
 
				+  methods: {
			
 
				+    // XXX: Shrink this function
			
 
				+    socketPointerDown (nodeId, e, socket) {
			
 
				+      const nodeRef = this.$refs.nodes.find(n => n.id === nodeId)
			
 
				+      const node = this.nodeData.nodes.find(n => n.id === nodeId)
			
 
				+
			
 
				+      const isInput = socket.in !== undefined
			
 
				+      const socketPos = isInput ? nodeRef.inputPos(socket.in) : nodeRef.outputPos(socket.out)
			
 
				+
			
 
				+      const p = this.transformedPoint(e.clientX, e.clientY)
			
 
				+      if (isInput) {
			
 
				+        this.pointerLink.props = {
			
 
				+          x1: node.x + socketPos.x,
			
 
				+          y1: node.y + socketPos.y,
			
 
				+          x2: p.x,
			
 
				+          y2: p.y
			
 
				+        }
			
 
				+      } else {
			
 
				+        this.pointerLink.props = {
			
 
				+          x1: p.x,
			
 
				+          y1: p.y,
			
 
				+          x2: node.x + socketPos.x,
			
 
				+          y2: node.y + socketPos.y
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      this.pointerLink.active = true
			
 
				+      if (isInput) {
			
 
				+        this.pointerLink.src = {nodeId: nodeId, type: this.nodeData.registry[node.src].inputs[socket.in], in: socket.in}
			
 
				+      } else {
			
 
				+        this.pointerLink.src = {nodeId: nodeId, type: this.nodeData.registry[node.src].output, out: 0}
			
 
				+      }
			
 
				+
			
 
				+      // What socket is this
			
 
				+      // Create a temporary link
			
 
				+      const drag = (e) => {
			
 
				+        const p = this.transformedPoint(e.clientX, e.clientY)
			
 
				+        if (isInput) {
			
 
				+          this.pointerLink.props.x1 = p.x
			
 
				+          this.pointerLink.props.y1 = p.y
			
 
				+        } else {
			
 
				+          this.pointerLink.props.x2 = p.x
			
 
				+          this.pointerLink.props.y2 = p.y
			
 
				+        }
			
 
				+      }
			
 
				+      const drop = (e) => {
			
 
				+        document.removeEventListener('mousemove', drag)
			
 
				+        document.removeEventListener('mouseup', drop)
			
 
				+        this.pointerLink.active = false
			
 
				+
			
 
				+        const targetNodeId = e.target.getAttribute('data-nodeid')
			
 
				+        const targetIn = e.target.getAttribute('data-in')
			
 
				+        const targetOut = e.target.getAttribute('data-out')
			
 
				+        // Not a node or same node
			
 
				+        if (targetNodeId === undefined || targetNodeId === nodeId) {
			
 
				+          console.error('LINK: target is not a socket/ same socket')
			
 
				+          return
			
 
				+        }
			
 
				+        let link
			
 
				+        // target is input
			
 
				+        if (targetIn && !isInput) {
			
 
				+          link = {
			
 
				+            from: nodeId,
			
 
				+            to: targetNodeId,
			
 
				+            in: parseInt(targetIn)
			
 
				+          }
			
 
				+        } else if (targetOut && isInput) {
			
 
				+          link = {
			
 
				+            from: targetNodeId,
			
 
				+            to: nodeId,
			
 
				+            in: socket.in
			
 
				+          }
			
 
				+        }
			
 
				+        // No link
			
 
				+        if (!link) {
			
 
				+          console.error('LINK: input same direction (in->in/out->out)')
			
 
				+          return
			
 
				+        }
			
 
				+        const nodeFrom = this.nodeData.nodes.find(n => n.id === link.from)
			
 
				+        const nodeTo = this.nodeData.nodes.find(n => n.id === link.to)
			
 
				+        // Type checking
			
 
				+        if (this.nodeData.registry[ nodeFrom.src ].output !==
			
 
				+          this.nodeData.registry[ nodeTo.src ].inputs[link.in]) {
			
 
				+          console.error('LINK: Invalid type')
			
 
				+          return
			
 
				+        }
			
 
				+
			
 
				+        // Input already exists
			
 
				+        const existingInputI = this.nodeData.links.findIndex(l => l.to === link.to && l.in === link.in)
			
 
				+        if (existingInputI !== -1) {
			
 
				+          this.nodeData.links.splice(existingInputI, 1)
			
 
				+          // console.error('LINK: already has input')
			
 
				+          // return
			
 
				+        }
			
 
				+
			
 
				+        this.nodeData.links.push(link)
			
 
				+      }
			
 
				+      document.addEventListener('mousemove', drag)
			
 
				+      document.addEventListener('mouseup', drop)
			
 
				+    },
			
 
				+    nodeDragStart (e, i) {
			
 
				+      e.preventDefault()
			
 
				+      var tnode = this.nodeData.nodes[i]
			
 
				+      if (e.button === 1) {
			
 
				+        // remove related links
			
 
				+        this.nodeData.links = this.nodeData.links.filter(l => l.from !== tnode.id && l.to !== tnode.id)
			
 
				+        this.nodeData.nodes.splice(i, 1)
			
 
				+        return
			
 
				+      }
			
 
				+      if (e.button !== 0) return // first button
			
 
				+      // we can handle with nodeId and a search
			
 
				+      this.nodeData.nodes.splice(i, 1)
			
 
				+      this.nodeData.nodes.push(tnode) // put in last
			
 
				+
			
 
				+      // transform CTM
			
 
				+      const delta = this.transformedPoint(e.clientX, e.clientY)
			
 
				+      delta.x -= tnode.x
			
 
				+      delta.y -= tnode.y
			
 
				+
			
 
				+      const drag = (e) => {
			
 
				+        const point = this.transformedPoint(e.clientX, e.clientY)
			
 
				+        tnode.x = point.x - delta.x
			
 
				+        tnode.y = point.y - delta.y
			
 
				+      }
			
 
				+      const drop = (e) => {
			
 
				+        document.removeEventListener('mousemove', drag)
			
 
				+        document.removeEventListener('mouseup', drop)
			
 
				+      }
			
 
				+      document.addEventListener('mousemove', drag)
			
 
				+      document.addEventListener('mouseup', drop)
			
 
				+    },
			
 
				+    nodeAdd (k) {
			
 
				+      console.log('Adding:', k)
			
 
				+      this.nodeData.nodes.push({
			
 
				+        id: guid(),
			
 
				+        x: 100,
			
 
				+        y: 100,
			
 
				+        label: k,
			
 
				+        src: k
			
 
				+      })
			
 
				+    },
			
 
				+    removeLink (i) {
			
 
				+      this.nodeData.links.splice(i, 1)
			
 
				+    },
			
 
				+    createSVGPoint (x, y) {
			
 
				+      const p = this.$refs.svg.createSVGPoint()
			
 
				+      p.x = x; p.y = y
			
 
				+      return p
			
 
				+    },
			
 
				+    transformedPoint (x, y, abs) {
			
 
				+      const svgRect = this.$refs.svg.getBoundingClientRect()
			
 
				+      if (!abs) {
			
 
				+        x -= svgRect.x
			
 
				+        y -= svgRect.y
			
 
				+      }
			
 
				+      return this.$refs.panzoom.transformedPoint(this.createSVGPoint(x, y))
			
 
				+    }
			
 
				+    // helper
			
 
				+  }
			
 
				+
			
 
				+}
			
 
				+function guid () {
			
 
				+  function s4 () {
			
 
				+    return Math.floor((1 + Math.random()) * 0x10000)
			
 
				+      .toString(16)
			
 
				+      .substring(1)
			
 
				+  }
			
 
				+  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
			
 
				+    s4() + '-' + s4() + s4() + s4()
			
 
				+}
			
 
				+</script>
			
 
				+<style>
			
 
				+.flow-container {
			
 
				+  display:flex;
			
 
				+  flex-flow:column;
			
 
				+}
			
 
				+svg.view {
			
 
				+  border:none;
			
 
				+  position:relative;
			
 
				+}
			
 
				+
			
 
				+</style>
			
--- a/browser/vue-flow/src/components/flownode.vue
+++ b/browser/vue-flow/src/components/flownode.vue
@@ -13,7 +13,9 @@
 
				     <circle
			
 
				       class="flow-node__socket flow-node__socket--inputs"
			
 
				       v-for="(inp,i) in inputs"
			
 
				-      v-bind="inputPos(i)"
			
 
				+      v-bind="inputProps(i)"
			
 
				+      :data-nodeid="id"
			
 
				+      :data-in="i"
			
 
				       :class="{'flow-node__socket--match': inp == match.in}"
			
 
				       :key="'in'+i"
			
 
				       @mousedown.stop.prevent="socketPointerDown($event, {in:i})"
			
@@ -21,9 +23,11 @@
 
				     <!-- output -->
			
 
				     <circle
			
 
				       class="flow-node__socket flow-node__socket--outputs"
			
 
				+      :data-nodeid="id"
			
 
				+      :data-out="0"
			
 
				       :key="'out'+0"
			
 
				       :class="{ 'flow-node__socket--match': output == match.out}"
			
 
				-      v-bind="outputPos(0)"
			
 
				+      v-bind="outputProps(0)"
			
 
				       @mousedown.stop.prevent="socketPointerDown($event, {out:0})"
			
 
				     />
			
 
				     <text
			
@@ -45,7 +49,10 @@ export default {
 
				     'type': {type: String, default: ''},
			
 
				     'inputs': {type: Array, default: () => []},
			
 
				     'output': {type: String, default: ''},
			
 
				-    'match': {type: Object, default: () => {}}
			
 
				+    'match': {type: Object, default: () => {}},
			
 
				+
			
 
				+    'color': {type: String, default: '#444'},
			
 
				+    'textColor': {type: String, default: '#fff'}
			
 
				     // 'value': {type: Object, default: () => {}}
			
 
				   },
			
 
				   data () {
			
@@ -58,35 +65,52 @@ export default {
 
				   },
			
 
				   computed: {
			
 
				     labelProps () {
			
 
				-      console.log('match:', this.match)
			
 
				-      return {x: -this.labelRect.width / 2, y: 5}
			
 
				+      return {
			
 
				+        x: -this.labelRect.width / 2,
			
 
				+        y: 5,
			
 
				+        fill: this.textColor
			
 
				+      }
			
 
				     },
			
 
				     bodyProps () {
			
 
				       const width = this.labelRect.width + 20
			
 
				-      const rect = {x: -width / 2, y: -50, width: width, height: 100}
			
 
				+      const rect = {
			
 
				+        x: -width / 2,
			
 
				+        y: -50,
			
 
				+        width: width,
			
 
				+        height: 100,
			
 
				+        fill: this.color
			
 
				+      }
			
 
				       if (this.type === 'circle') {
			
 
				         rect.rx = width
			
 
				         rect.ry = width
			
 
				       }
			
 
				       return rect
			
 
				     },
			
 
				-
			
 
				-    // Do this else where
			
 
				-    inputPos () {
			
 
				+    inputProps () {
			
 
				       return (i) => {
			
 
				-        const ilen = this.inputs.length
			
 
				-        if (ilen === 0) return {}
			
 
				-        const d = this.bodyProps.height / (ilen * 2)
			
 
				+        const {x, y} = this.inputPos(i)
			
 
				         return {
			
 
				-          cx: this.bodyProps.x,
			
 
				-          cy: this.bodyProps.y + d + (i * 2 * d)
			
 
				+          transform: `translate(${x} ${y})`,
			
 
				+          r: 6
			
 
				+        }
			
 
				+      }
			
 
				+    },
			
 
				+    outputProps () {
			
 
				+      return (i) => {
			
 
				+        const {x, y} = this.outputPos(i)
			
 
				+        return {
			
 
				+          transform: `translate(${x} ${y})`,
			
 
				+          r: 6
			
 
				         }
			
 
				       }
			
 
				     },
			
 
				     outputPos () {
			
 
				       return (i) => {
			
 
				         const rect = this.bodyProps
			
 
				-        return {cx: rect.x + rect.width, cy: 0, r: 10}
			
 
				+        return {
			
 
				+          x: rect.x + rect.width,
			
 
				+          y: 0
			
 
				+        }
			
 
				       }
			
 
				     }
			
 
				 
			
@@ -108,6 +132,15 @@ export default {
 
				     })
			
 
				   },
			
 
				   methods: {
			
 
				+    inputPos (i) {
			
 
				+      const ilen = this.inputs.length
			
 
				+      if (ilen === 0) return {}
			
 
				+      const d = this.bodyProps.height / (ilen * 2)
			
 
				+      return {
			
 
				+        x: this.bodyProps.x,
			
 
				+        y: this.bodyProps.y + d + (i * 2 * d)
			
 
				+      }
			
 
				+    },
			
 
				     socketPointerDown (e, socket) {
			
 
				       this.$emit('socketPointerDown', e, socket)
			
 
				     }
			
@@ -116,45 +149,44 @@ export default {
 
				 }
			
 
				 </script>
			
 
				 <style lang="scss">
			
 
				+.flow-node {
			
 
				+  position:relative;
			
 
				+}
			
 
				 .flow-node__body {
			
 
				-  fill: #EFEFEF;
			
 
				-  stroke: #ddd;
			
 
				+  // fill:#ddd;
			
 
				+  stroke: rgba(190,0,0,0);
			
 
				   stroke-width:1;
			
 
				 
			
 
				-  -webkit-filter: drop-shadow(5px 5px 5px #000);
			
 
				-          filter: drop-shadow(5px 5px 5px #000);
			
 
				-
			
 
				 }
			
 
				 .flow-node__body:hover,
			
 
				 .flow-node.flow-node--dragging s-node__body {
			
 
				-  z-index:10;
			
 
				-  fill: #DFDFDF;
			
 
				   cursor:move;
			
 
				-  //stroke:red;
			
 
				-  //stroke-width:4;
			
 
				-  transition: all 1s;
			
 
				+  stroke:rgba(190,0,0,1);
			
 
				+  stroke-width:1;
			
 
				+  transition: all .3s;
			
 
				 }
			
 
				 .flow-node.flow-node--dragging {
			
 
				 }
			
 
				 .flow-node__socket {
			
 
				   fill: #AFAFAF;
			
 
				-  stroke:none;
			
 
				+  stroke: #AFAFAF;
			
 
				+  stroke-width:2;
			
 
				 
			
 
				   cursor:pointer;
			
 
				-  stroke-width:2;
			
 
				   r:6;
			
 
				 }
			
 
				+
			
 
				 .flow-node__socket:hover {
			
 
				-  r:10;
			
 
				+  stroke: #5F5FFF;
			
 
				+  stroke-width:2;
			
 
				 }
			
 
				-.flow-node__inputs {
			
 
				+.flow-node__socket--match {
			
 
				+  fill:green;
			
 
				+  stroke:green;
			
 
				 }
			
 
				+
			
 
				 .flow-node__label {
			
 
				-  fill: #444;
			
 
				   pointer-events:none;
			
 
				   user-select:none;
			
 
				 }
			
 
				-.flownode__socket--match {
			
 
				-  fill:#0F0;
			
 
				-}
			
 
				 </style>
			
--- a/browser/vue-flow/src/components/flowpanzoom.vue
+++ b/browser/vue-flow/src/components/flowpanzoom.vue
@@ -2,14 +2,14 @@
 
				   <g>
			
 
				     <rect
			
 
				       ref="transformer"
			
 
				-      class="transformer"
			
 
				+      class="flow-pan-zoom__transformer"
			
 
				       width="100%"
			
 
				       height="100%"
			
 
				-      @mousedown="dragStart"/>
			
 
				+      @mousedown.stop.prevent="dragStart"/>
			
 
				 
			
 
				     <g
			
 
				       ref="transform"
			
 
				-      :transform="panzoomTransform">
			
 
				+      v-bind="transformProps">
			
 
				       <slot/>
			
 
				     </g>
			
 
				   </g>
			
@@ -25,16 +25,21 @@ export default {
 
				     return {
			
 
				       zoom: this.value.zoom,
			
 
				       x: this.value.x,
			
 
				-      y: this.value.y
			
 
				+      y: this.value.y,
			
 
				+      moving: false
			
 
				     }
			
 
				   },
			
 
				   computed: {
			
 
				-    panzoomTransform () {
			
 
				+    transformProps () {
			
 
				       const transString = 'matrix(' + [
			
 
				         this.zoom, 0, 0,
			
 
				         this.zoom, this.x, this.y
			
 
				       ].join(' ') + ')'
			
 
				-      return transString
			
 
				+
			
 
				+      return {
			
 
				+        transform: transString,
			
 
				+        class: 'flow-pan-zoom__transform ' + this.moving ? 'moving' : ''
			
 
				+      }
			
 
				     }
			
 
				 
			
 
				   },
			
@@ -51,10 +56,11 @@ export default {
 
				       if (e.target !== this.$refs.transformer) return
			
 
				 
			
 
				       const drag = (e) => {
			
 
				+        this.moving = true
			
 
				         this.update(this.x + e.movementX, this.y + e.movementY)
			
 
				       }
			
 
				       const drop = (e) => {
			
 
				-        console.log('Dropping')
			
 
				+        this.moving = false
			
 
				         document.removeEventListener('mousemove', drag)
			
 
				         document.removeEventListener('mouseup', drop)
			
 
				       }
			
@@ -63,10 +69,12 @@ export default {
 
				     },
			
 
				     wheel (e) {
			
 
				       e.preventDefault()
			
 
				+      let deltaY = (e.deltaY > 0) ? 1 : -1
			
 
				+      deltaY *= (e.shiftKey) ? 0.01 : 0.07
			
 
				       const svgRect = this.$refs.transformer.getBoundingClientRect()
			
 
				       const oX = e.clientX - svgRect.x
			
 
				       const oY = e.clientY - svgRect.y
			
 
				-      const z = this.zoom - (e.deltaY * 0.001 * this.zoom)
			
 
				+      const z = this.zoom - (deltaY * this.zoom)
			
 
				 
			
 
				       var curX = this.x
			
 
				       var curY = this.y
			
@@ -94,10 +102,8 @@ export default {
 
				 </script>
			
 
				 
			
 
				 <style>
			
 
				-.transformer {
			
 
				-  stroke: black;
			
 
				-  stroke-width: 1;
			
 
				+.flow-pan-zoom__transformer {
			
 
				   fill:transparent;
			
 
				-
			
 
				 }
			
 
				+
			
 
				 </style>
			
--- a/browser/vue-flow/src/components/flowmain.vue
+++ b/browser/vue-flow/src/components/flowmain.vue
@@ -0,0 +1,78 @@
 
				+<template>
			
 
				+  <div class="flow-main">
			
 
				+    <div class="app-header">
			
 
				+      Flow
			
 
				+    </div>
			
 
				+    <div class="app-flow-container">
			
 
				+      <div class="app-info">
			
 
				+        <h4>TODO:</h4>
			
 
				+        <ul>
			
 
				+          <li>Load the functions from server registry</li>
			
 
				+          <li>Create session based collaboration</li>
			
 
				+          <li>Build the graph on the server</li>
			
 
				+          <li>Create training mechanism</li>
			
 
				+          <li>matrix pooling</li>
			
 
				+          <li>Group nodes into a single box, exposing inputs and outputs</li>
			
 
				+        </ul>
			
 
				+
			
 
				+      </div>
			
 
				+      <flow-manager
			
 
				+        width="100%"
			
 
				+        height="100%"/>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+import FlowManager from '@/components/flow/manager'
			
 
				+import 'reset-css/reset.css'
			
 
				+import '@/assets/style.css'
			
 
				+
			
 
				+export default {
			
 
				+  components: {FlowManager},
			
 
				+
			
 
				+  mounted () {
			
 
				+    if (this.$route.params.sessID === undefined) {
			
 
				+      console.log('Requesting new session')
			
 
				+      this.$ws.send({op: 'newSession'})
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+}
			
 
				+
			
 
				+</script>
			
 
				+<style>
			
 
				+.flow-main {
			
 
				+  height:100%;
			
 
				+  display:flex;
			
 
				+  flex-direction: column;
			
 
				+}
			
 
				+.flow-main .app-flow-container {
			
 
				+  position:relative;
			
 
				+  flex:1;
			
 
				+}
			
 
				+.flow-main .flow-container {
			
 
				+  position:absolute;
			
 
				+  top:0;
			
 
				+  right:0;
			
 
				+  bottom:0;
			
 
				+  left:0;
			
 
				+}
			
 
				+
			
 
				+.flow-main .app-header {
			
 
				+  background:#113244;
			
 
				+  color:#EEE;
			
 
				+  padding:14px;
			
 
				+  font-weight:bold;
			
 
				+}
			
 
				+.flow-main  .app-info {
			
 
				+  box-shadow:0px 1px 1px rgba(150,150,0,0.2);
			
 
				+  color: #999;
			
 
				+  background: #FfFfdd;
			
 
				+  margin:20px;
			
 
				+  padding:20px;
			
 
				+  position:absolute;
			
 
				+  left:0;
			
 
				+  bottom:10%;
			
 
				+}
			
 
				+
			
 
				+</style>
			
--- a/browser/vue-flow/src/components/flowmanager.vue
+++ b/browser/vue-flow/src/components/flowmanager.vue
@@ -1,197 +0,0 @@
 
				-<template>
			
 
				-  <div class="flow-container">
			
 
				-    <svg
			
 
				-      ref="svg"
			
 
				-      class="view"
			
 
				-      :width="width"
			
 
				-      :height="height">
			
 
				-      <flow-pan-zoom ref="panzoom" v-model="nodeData.panzoom">
			
 
				-        <flow-link
			
 
				-          v-for="(l,i) in nodeData.links"
			
 
				-          :key="i"
			
 
				-          v-bind="linkProps(l)"
			
 
				-        />
			
 
				-        <!-- mouse link-->
			
 
				-        <flow-link
			
 
				-          v-if="pointerLink.active"
			
 
				-          v-bind="pointerLink"
			
 
				-        />
			
 
				-        <flow-node
			
 
				-          ref="nodes"
			
 
				-          v-for="(n,i) of nodeData.nodes"
			
 
				-          :key="'node' + n.id"
			
 
				-          :id="n.id"
			
 
				-          v-bind="nodeProps(n)"
			
 
				-          @nodePointerDown.prevent="nodeDragStart($event,i)"
			
 
				-          @socketPointerDown="socketPointerDown(n.id,...arguments)"
			
 
				-        />
			
 
				-      </flow-pan-zoom>
			
 
				-    </svg>
			
 
				-    {{ nodeData }}
			
 
				-    <div v-for="(n,i) of nodeData.nodes">
			
 
				-      <input type="text" v-model="n.label">
			
 
				-    </div>
			
 
				-  </div>
			
 
				-</template>
			
 
				-<script>
			
 
				-import nodeData from './nodedata'
			
 
				-import FlowNode from './flownode'
			
 
				-import FlowLink from './flowlink'
			
 
				-import FlowPanZoom from './flowpanzoom'
			
 
				-
			
 
				-export default {
			
 
				-  name: 'FlowManager',
			
 
				-  components: {FlowNode, FlowLink, FlowPanZoom},
			
 
				-  props: {
			
 
				-    'width': {type: String, default: '800px'},
			
 
				-    'height': {type: String, default: '600px'}
			
 
				-  },
			
 
				-  data () {
			
 
				-    return {
			
 
				-      nodeData: nodeData,
			
 
				-      pointerLink: {active: false, x1: 0, y1: 0, x2: 0, y2: 0},
			
 
				-      hlType: ''
			
 
				-    }
			
 
				-  },
			
 
				-  computed: {
			
 
				-    nodeProps () {
			
 
				-      return (n) => {
			
 
				-        return {
			
 
				-          transform: `translate(${n.x} ${n.y})`,
			
 
				-          id: n.id,
			
 
				-          label: n.label,
			
 
				-          type: this.nodeData.registry[n.src].type,
			
 
				-          inputs: this.nodeData.registry[n.src].inputs,
			
 
				-          output: this.nodeData.registry[n.src].output,
			
 
				-          match: {}
			
 
				-        }
			
 
				-      }
			
 
				-    },
			
 
				-    // computed
			
 
				-    linkProps () {
			
 
				-      return (link) => {
			
 
				-        if (!this.$refs.nodes) return
			
 
				-        // find Index perhaps
			
 
				-        const nodeFrom = this.nodeData.nodes.find(n => n.id === link.from)
			
 
				-        const nodeTo = this.nodeData.nodes.find(n => n.id === link.to)
			
 
				-
			
 
				-        const refFrom = this.$refs.nodes.find(n => n.id === link.from)
			
 
				-        const refTo = this.$refs.nodes.find(n => n.id === link.to)
			
 
				-
			
 
				-        const fromOutput = refFrom.outputPos(0) // only 1 output
			
 
				-        const toInput = refTo.inputPos(link.in)
			
 
				-
			
 
				-        const x1 = nodeFrom.x + fromOutput.cx // + inputPos.x
			
 
				-        const y1 = nodeFrom.y + fromOutput.cy // + inputPos.y
			
 
				-
			
 
				-        const x2 = nodeTo.x + toInput.cx
			
 
				-        const y2 = nodeTo.y + toInput.cy
			
 
				-        // console.log('Thing:', x1, y1, x2, y2)
			
 
				-        return {x1, y1, x2, y2}
			
 
				-      }
			
 
				-    }
			
 
				-
			
 
				-  },
			
 
				-  mounted () {
			
 
				-    this.$nextTick(() => {
			
 
				-      this.$forceUpdate()
			
 
				-    })
			
 
				-  },
			
 
				-  methods: {
			
 
				-    socketPointerDown (nodeId, e, socket) {
			
 
				-      const nodeRef = this.$refs.nodes.find(n => n.id === nodeId)
			
 
				-      const node = this.nodeData.nodes.find(n => n.id === nodeId)
			
 
				-
			
 
				-      const isInput = socket.in !== undefined
			
 
				-      const socketPos = isInput ? nodeRef.inputPos(socket.in) : nodeRef.outputPos(socket.out)
			
 
				-
			
 
				-      const p = this.transformedPoint(e.x, e.y)
			
 
				-      if (isInput) {
			
 
				-        this.pointerLink.x1 = node.x + socketPos.cx
			
 
				-        this.pointerLink.y1 = node.y + socketPos.cy
			
 
				-        this.pointerLink.x2 = p.x
			
 
				-        this.pointerLink.y2 = p.y
			
 
				-      } else {
			
 
				-        this.pointerLink.x1 = p.x
			
 
				-        this.pointerLink.y1 = p.y
			
 
				-        this.pointerLink.x2 = node.x + socketPos.cx
			
 
				-        this.pointerLink.y2 = node.y + socketPos.cy
			
 
				-      }
			
 
				-
			
 
				-      this.pointerLink.active = true
			
 
				-
			
 
				-      // What socket is this
			
 
				-      // Create a temporary link
			
 
				-      const drag = (e) => {
			
 
				-        const p = this.transformedPoint(e.x, e.y)
			
 
				-        if (isInput) {
			
 
				-          this.pointerLink.x1 = p.x
			
 
				-          this.pointerLink.y1 = p.y
			
 
				-        } else {
			
 
				-          this.pointerLink.x2 = p.x
			
 
				-          this.pointerLink.y2 = p.y
			
 
				-        }
			
 
				-      }
			
 
				-      const drop = (e) => {
			
 
				-        console.log('Dropping link in ', e.target)
			
 
				-        document.removeEventListener('mousemove', drag)
			
 
				-        document.removeEventListener('mouseup', drop)
			
 
				-      }
			
 
				-      document.addEventListener('mousemove', drag)
			
 
				-      document.addEventListener('mouseup', drop)
			
 
				-    },
			
 
				-    nodeDragStart (e, i) {
			
 
				-      if (e.button !== 0) return // first button
			
 
				-      // we can handle with nodeId and a search
			
 
				-      var tnode = this.nodeData.nodes[i]
			
 
				-      this.nodeData.nodes.splice(i, 1)
			
 
				-      this.nodeData.nodes.push(tnode) // put in last
			
 
				-
			
 
				-      // transform CTM
			
 
				-      const delta = this.transformedPoint(e.clientX, e.clientY)
			
 
				-      delta.x -= tnode.x
			
 
				-      delta.y -= tnode.y
			
 
				-
			
 
				-      const drag = (e) => {
			
 
				-        const point = this.transformedPoint(e.clientX, e.clientY)
			
 
				-        tnode.x = point.x - delta.x
			
 
				-        tnode.y = point.y - delta.y
			
 
				-      }
			
 
				-      const drop = (e) => {
			
 
				-        document.removeEventListener('mousemove', drag)
			
 
				-        document.removeEventListener('mouseup', drop)
			
 
				-      }
			
 
				-      document.addEventListener('mousemove', drag)
			
 
				-      document.addEventListener('mouseup', drop)
			
 
				-    },
			
 
				-
			
 
				-    createSVGPoint (x, y) {
			
 
				-      const p = this.$refs.svg.createSVGPoint()
			
 
				-      p.x = x; p.y = y
			
 
				-      return p
			
 
				-    },
			
 
				-    transformedPoint (x, y, abs) {
			
 
				-      const svgRect = this.$el.getBoundingClientRect()
			
 
				-      if (!abs) {
			
 
				-        x -= svgRect.x
			
 
				-        y -= svgRect.y
			
 
				-      }
			
 
				-      return this.$refs.panzoom.transformedPoint(this.createSVGPoint(x, y))
			
 
				-    }
			
 
				-    // helper
			
 
				-  }
			
 
				-
			
 
				-}
			
 
				-
			
 
				-</script>
			
 
				-<style>
			
 
				-.flow-container {
			
 
				-  display:flex;
			
 
				-  flex-flow:column;
			
 
				-}
			
 
				-svg.view {
			
 
				-  border: solid 1px #F00;
			
 
				-  position:relative;
			
 
				-}
			
 
				-
			
 
				-</style>
			
--- a/browser/vue-flow/src/components/nodedata.js
+++ b/browser/vue-flow/src/components/nodedata.js
@@ -1,20 +1,22 @@
 
				 // Document shared state
			
 
				-export default{
			
 
				+/* export default{
			
 
				   panzoom: { x: 0, y: 0, zoom: 1 },
			
 
				   defaults: { nodeHeight: 100 },
			
 
				   registry: {
			
 
				-    'MatMul': { inputs: [ '[]float32', '[]float32' ], output: '[]float32' },
			
 
				+    'MatMul': { inputs: [ '[]float32', '[]float32' ], output: '[]float32', style: {color: '#789', textColor: '#fff'} },
			
 
				     'Weights': { inputs: [], output: '[]float32' },
			
 
				-    'Input': { inputs: [], output: '[]float32' },
			
 
				-    'Activator': { inputs: [ '[]float32' ], output: '[]float32', type: 'circle' },
			
 
				-    'R': { inputs: [ '[]float32', '[]float32' ], output: 'string ' }
			
 
				+    'Input': { inputs: [], output: '[]float32', style: {color: '#686', textColor: '#fff'}},
			
 
				+    'Activator': { inputs: [ '[]float32' ], output: '[]float32', type: 'circle', style: {color: '#a44', textColor: 'white'}},
			
 
				+    'R': { inputs: [ '[]float32', 'string' ], output: 'string' },
			
 
				+    'reverse': { inputs: [ 'string' ], output: 'string' }
			
 
				   },
			
 
				   nodes: [
			
 
				     { id: '1', x: 976, y: 163, label: 'Test input random', src: 'R' },
			
 
				     { id: '2', x: 702, y: 190, label: 'Sigmoid', src: 'Activator' },
			
 
				     { id: '3', x: 541, y: 195, label: 'MatMul', src: 'MatMul' },
			
 
				     { id: '4', x: 320, y: 249, label: 'Input', src: 'Input' },
			
 
				-    { id: '5', x: 347, y: 90, label: 'Weights', src: 'Weights' }
			
 
				+    { id: '5', x: 347, y: 90, label: 'Weights', src: 'Weights' },
			
 
				+    { id: '6', x: 976, y: 263, label: 'reverse', src: 'reverse' }
			
 
				   ],
			
 
				   links: [
			
 
				     { from: '4', to: '3', in: 1 },
			
@@ -22,4 +24,36 @@ export default{
 
				     { from: '3', to: '2', in: 0 },
			
 
				     { from: '2', to: '1', in: 0 }
			
 
				   ]
			
 
				+} /**/
			
 
				+
			
 
				+export default {
			
 
				+  panzoom: { x: 0, y: 0, zoom: 1 },
			
 
				+  defaults: { 'nodeHeight': 100 },
			
 
				+  registry: {
			
 
				+    'MatMul': { inputs: [ '[]float32', '[]float32' ], output: '[]float32', style: { 'color': '#789', 'textColor': '#fff' } },
			
 
				+    'Weights': { inputs: [], output: '[]float32' },
			
 
				+    'Input': { inputs: [], output: '[]float32', style: { 'color': '#686', 'textColor': '#fff' } },
			
 
				+    'Activator': { inputs: [ '[]float32' ], output: '[]float32', 'type': 'circle', style: { 'color': '#a44', 'textColor': 'white' } },
			
 
				+    'test': { inputs: [ '[]float32', 'string' ], output: 'string' },
			
 
				+    'reverse': { inputs: [ 'string' ], output: 'string' }
			
 
				+  },
			
 
				+  nodes: [
			
 
				+    { id: '4', x: 175, y: 85, label: 'Input', src: 'Input' },
			
 
				+    { id: '3', x: 400, y: 111, label: 'MatMul', src: 'MatMul' },
			
 
				+    { id: '1', x: 1041, y: 137, label: 'Testing', src: 'test' },
			
 
				+    { id: '6', x: 735, y: 115, label: 'MatMul', src: 'MatMul' },
			
 
				+    { id: '8', x: 908, y: 113, label: 'Activator', src: 'Activator' },
			
 
				+    { id: '2', x: 556, y: 114, label: 'Sigmoid', src: 'Activator' },
			
 
				+    { id: '7', x: 615, y: 283, label: 'Weights', src: 'Weights' },
			
 
				+    { id: '5', x: 256, y: 269, label: 'Weights', src: 'Weights' }
			
 
				+  ],
			
 
				+  links: [
			
 
				+    { from: '3', to: '2', in: 0 },
			
 
				+    { from: '2', to: '6', in: 0 },
			
 
				+    { from: '5', to: '3', in: 1 },
			
 
				+    { from: '4', to: '3', in: 0 },
			
 
				+    { from: '7', to: '6', in: 1 },
			
 
				+    { from: '6', to: '8', in: 0 },
			
 
				+    { from: '8', to: '1', in: 0 }
			
 
				+  ]
			
 
				 }
			
--- a/browser/vue-flow/src/main.js
+++ b/browser/vue-flow/src/main.js
@@ -1,7 +1,12 @@
 
				 import Vue from 'vue'
			
 
				 import App from './App.vue'
			
 
				+import WsConn from './services/wsconn'
			
 
				+import router from './router'
			
 
				+
			
 
				+Vue.use(WsConn, {location: 'ws://' + window.location.host + '/conn'})
			
 
				 
			
 
				 window.app = new Vue({
			
 
				   el: '#app',
			
 
				+  router,
			
 
				   render: h => h(App)
			
 
				 })
			
--- a/browser/vue-flow/src/router/index.js
+++ b/browser/vue-flow/src/router/index.js
@@ -0,0 +1,13 @@
 
				+import Vue from 'vue'
			
 
				+import Router from 'vue-router'
			
 
				+import FlowMain from '@/components/flowmain'
			
 
				+
			
 
				+Vue.use(Router)
			
 
				+
			
 
				+export default new Router({
			
 
				+  mode: 'history',
			
 
				+  routes: [
			
 
				+    { path: '/:sessId', component: FlowMain }
			
 
				+  ]
			
 
				+
			
 
				+})
			
--- a/browser/vue-flow/src/services/wsconn.js
+++ b/browser/vue-flow/src/services/wsconn.js
@@ -0,0 +1,47 @@
 
				+export default {
			
 
				+
			
 
				+  install (Vue, options) {
			
 
				+    let ws
			
 
				+    let connected = false
			
 
				+
			
 
				+    const eventBus = new Vue({
			
 
				+      methods: {
			
 
				+        send (msg) {
			
 
				+          if (connected === false) {
			
 
				+            console.log('No connection, scheduling message')
			
 
				+            this.$on('open', () => {
			
 
				+              this.$emit('send', msg)
			
 
				+            })
			
 
				+            return
			
 
				+          }
			
 
				+          this.$emit('send', msg)
			
 
				+        }
			
 
				+      }
			
 
				+    })
			
 
				+
			
 
				+    const connect = (loc) => {
			
 
				+      ws = new window.WebSocket(loc)
			
 
				+      ws.onopen = () => { this.connected = true; console.log('Connected'); eventBus.$emit('open') }
			
 
				+      ws.onmessage = (e) => {}
			
 
				+      ws.onerror = (e) => { this.connected = false; console.log('Error:', e) }
			
 
				+      ws.onclose = () => {
			
 
				+        if (connected === true) { } // emit close
			
 
				+        connected = false
			
 
				+        setTimeout(() => connect(loc), 3000) // Reconnect
			
 
				+      }
			
 
				+      ws.onmessage = (e) => { // receiving message
			
 
				+        console.log('Message received')
			
 
				+        eventBus.$emit('message', JSON.parse(e.data))
			
 
				+      }
			
 
				+    }
			
 
				+    connect(options.location)
			
 
				+
			
 
				+    eventBus.$on('send', (msg) => {
			
 
				+      console.log('Sending message', msg)
			
 
				+      ws.send(JSON.stringify(msg))
			
 
				+    })
			
 
				+
			
 
				+    Vue.prototype.$ws = eventBus
			
 
				+  }
			
 
				+
			
 
				+}
			
--- a/browser/vue-flow/webpack.config.js
+++ b/browser/vue-flow/webpack.config.js
@@ -2,13 +2,13 @@ var path = require('path')
 
				 var webpack = require('webpack')
			
 
				 var HtmlWebpackPlugin = require('html-webpack-plugin')
			
 
				 
			
 
				-var outfile = 'vue-edi-table.js'
			
 
				+var outfile = 'index.js'
			
 
				 
			
 
				 module.exports = {
			
 
				   entry: './src/main.js',
			
 
				   output: {
			
 
				     path: path.resolve(__dirname, './dist'),
			
 
				-    publicPath: '/dist',
			
 
				+    publicPath: '/',
			
 
				     filename: outfile
			
 
				     // libraryTarget: 'commonjs2'
			
 
				   },
			
@@ -105,7 +105,8 @@ if (process.env.NODE_ENV === 'production') {
 
				     }),
			
 
				     new webpack.LoaderOptionsPlugin({
			
 
				       minimize: true
			
 
				-    })
			
 
				+    }),
			
 
				+    new HtmlWebpackPlugin({filename: 'index.html', template: 'index.html'})
			
 
				   ])
			
 
				-  module.exports.externals = { 'vue': 'vue' }
			
 
				+  // module.exports.externals = { 'vue': 'vue' }
			
 
				 }
			
--- a/browser/vue-flow/yarn.lock
+++ b/browser/vue-flow/yarn.lock
@@ -10,6 +10,14 @@
 
				     esutils "^2.0.2"
			
 
				     js-tokens "^3.0.0"
			
 
				 
			
 
				+"@babel/code-frame@7.0.0-beta.36":
			
 
				+  version "7.0.0-beta.36"
			
 
				+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.36.tgz#2349d7ec04b3a06945ae173280ef8579b63728e4"
			
 
				+  dependencies:
			
 
				+    chalk "^2.0.0"
			
 
				+    esutils "^2.0.2"
			
 
				+    js-tokens "^3.0.0"
			
 
				+
			
 
				 "@babel/helper-function-name@7.0.0-beta.31":
			
 
				   version "7.0.0-beta.31"
			
 
				   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.31.tgz#afe63ad799209989348b1109b44feb66aa245f57"
			
@@ -19,12 +27,26 @@
 
				     "@babel/traverse" "7.0.0-beta.31"
			
 
				     "@babel/types" "7.0.0-beta.31"
			
 
				 
			
 
				+"@babel/helper-function-name@7.0.0-beta.36":
			
 
				+  version "7.0.0-beta.36"
			
 
				+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.36.tgz#366e3bc35147721b69009f803907c4d53212e88d"
			
 
				+  dependencies:
			
 
				+    "@babel/helper-get-function-arity" "7.0.0-beta.36"
			
 
				+    "@babel/template" "7.0.0-beta.36"
			
 
				+    "@babel/types" "7.0.0-beta.36"
			
 
				+
			
 
				 "@babel/helper-get-function-arity@7.0.0-beta.31":
			
 
				   version "7.0.0-beta.31"
			
 
				   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.31.tgz#1176d79252741218e0aec872ada07efb2b37a493"
			
 
				   dependencies:
			
 
				     "@babel/types" "7.0.0-beta.31"
			
 
				 
			
 
				+"@babel/helper-get-function-arity@7.0.0-beta.36":
			
 
				+  version "7.0.0-beta.36"
			
 
				+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.36.tgz#f5383bac9a96b274828b10d98900e84ee43e32b8"
			
 
				+  dependencies:
			
 
				+    "@babel/types" "7.0.0-beta.36"
			
 
				+
			
 
				 "@babel/template@7.0.0-beta.31":
			
 
				   version "7.0.0-beta.31"
			
 
				   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.31.tgz#577bb29389f6c497c3e7d014617e7d6713f68bda"
			
@@ -34,6 +56,15 @@
 
				     babylon "7.0.0-beta.31"
			
 
				     lodash "^4.2.0"
			
 
				 
			
 
				+"@babel/template@7.0.0-beta.36":
			
 
				+  version "7.0.0-beta.36"
			
 
				+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.36.tgz#02e903de5d68bd7899bce3c5b5447e59529abb00"
			
 
				+  dependencies:
			
 
				+    "@babel/code-frame" "7.0.0-beta.36"
			
 
				+    "@babel/types" "7.0.0-beta.36"
			
 
				+    babylon "7.0.0-beta.36"
			
 
				+    lodash "^4.2.0"
			
 
				+
			
 
				 "@babel/traverse@7.0.0-beta.31":
			
 
				   version "7.0.0-beta.31"
			
 
				   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.31.tgz#db399499ad74aefda014f0c10321ab255134b1df"
			
@@ -47,6 +78,19 @@
 
				     invariant "^2.2.0"
			
 
				     lodash "^4.2.0"
			
 
				 
			
 
				+"@babel/traverse@7.0.0-beta.36":
			
 
				+  version "7.0.0-beta.36"
			
 
				+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.36.tgz#1dc6f8750e89b6b979de5fe44aa993b1a2192261"
			
 
				+  dependencies:
			
 
				+    "@babel/code-frame" "7.0.0-beta.36"
			
 
				+    "@babel/helper-function-name" "7.0.0-beta.36"
			
 
				+    "@babel/types" "7.0.0-beta.36"
			
 
				+    babylon "7.0.0-beta.36"
			
 
				+    debug "^3.0.1"
			
 
				+    globals "^11.1.0"
			
 
				+    invariant "^2.2.0"
			
 
				+    lodash "^4.2.0"
			
 
				+
			
 
				 "@babel/types@7.0.0-beta.31":
			
 
				   version "7.0.0-beta.31"
			
 
				   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.31.tgz#42c9c86784f674c173fb21882ca9643334029de4"
			
@@ -55,6 +99,14 @@
 
				     lodash "^4.2.0"
			
 
				     to-fast-properties "^2.0.0"
			
 
				 
			
 
				+"@babel/types@7.0.0-beta.36":
			
 
				+  version "7.0.0-beta.36"
			
 
				+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.36.tgz#64f2004353de42adb72f9ebb4665fc35b5499d23"
			
 
				+  dependencies:
			
 
				+    esutils "^2.0.2"
			
 
				+    lodash "^4.2.0"
			
 
				+    to-fast-properties "^2.0.0"
			
 
				+
			
 
				 abbrev@1:
			
 
				   version "1.1.1"
			
 
				   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
			
@@ -337,6 +389,17 @@ babel-eslint@^8.0.2:
 
				     eslint-scope "~3.7.1"
			
 
				     eslint-visitor-keys "^1.0.0"
			
 
				 
			
 
				+babel-eslint@^8.2.1:
			
 
				+  version "8.2.1"
			
 
				+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.2.1.tgz#136888f3c109edc65376c23ebf494f36a3e03951"
			
 
				+  dependencies:
			
 
				+    "@babel/code-frame" "7.0.0-beta.36"
			
 
				+    "@babel/traverse" "7.0.0-beta.36"
			
 
				+    "@babel/types" "7.0.0-beta.36"
			
 
				+    babylon "7.0.0-beta.36"
			
 
				+    eslint-scope "~3.7.1"
			
 
				+    eslint-visitor-keys "^1.0.0"
			
 
				+
			
 
				 babel-generator@^6.26.0:
			
 
				   version "6.26.0"
			
 
				   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
			
@@ -804,6 +867,10 @@ babylon@7.0.0-beta.31:
 
				   version "7.0.0-beta.31"
			
 
				   resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.31.tgz#7ec10f81e0e456fd0f855ad60fa30c2ac454283f"
			
 
				 
			
 
				+babylon@7.0.0-beta.36:
			
 
				+  version "7.0.0-beta.36"
			
 
				+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.36.tgz#3a3683ba6a9a1e02b0aa507c8e63435e39305b9e"
			
 
				+
			
 
				 babylon@^6.18.0:
			
 
				   version "6.18.0"
			
 
				   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
			
@@ -2446,7 +2513,7 @@ globals@^10.0.0:
 
				   version "10.4.0"
			
 
				   resolved "https://registry.yarnpkg.com/globals/-/globals-10.4.0.tgz#5c477388b128a9e4c5c5d01c7a2aca68c68b2da7"
			
 
				 
			
 
				-globals@^11.0.1:
			
 
				+globals@^11.0.1, globals@^11.1.0:
			
 
				   version "11.1.0"
			
 
				   resolved "https://registry.yarnpkg.com/globals/-/globals-11.1.0.tgz#632644457f5f0e3ae711807183700ebf2e4633e4"
			
 
				 
			
@@ -4606,6 +4673,10 @@ requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0:
 
				   version "1.0.0"
			
 
				   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
			
 
				 
			
 
				+reset-css@^2.2.1:
			
 
				+  version "2.2.1"
			
 
				+  resolved "https://registry.yarnpkg.com/reset-css/-/reset-css-2.2.1.tgz#fe3204c0c4831979fbb4967c90a992f0164635ed"
			
 
				+
			
 
				 resolve-cwd@^2.0.0:
			
 
				   version "2.0.0"
			
 
				   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
			
@@ -5370,6 +5441,10 @@ vue-loader@^13.0.5:
 
				     vue-style-loader "^3.0.0"
			
 
				     vue-template-es2015-compiler "^1.6.0"
			
 
				 
			
 
				+vue-router@^3.0.1:
			
 
				+  version "3.0.1"
			
 
				+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"
			
 
				+
			
 
				 vue-style-loader@^3.0.0:
			
 
				   version "3.0.3"
			
 
				   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.0.3.tgz#623658f81506aef9d121cdc113a4f5c9cac32df7"
			
--- a/go/DIST/flowserver
+++ b/go/DIST/flowserver
--- a/go/Makefile
+++ b/go/Makefile
@@ -0,0 +1,55 @@
 
				+# Luis Figueiredo (luisf@casemyway.com)
			
 
				+# 
			
 
				+
			
 
				+GOPATH=$(CURDIR)/deps:$(CURDIR)
			
 
				+DIST=./DIST
			
 
				+ENV=
			
 
				+
			
 
				+# Source in packages names
			
 
				+# What packages to build
			
 
				+
			
 
				+# CLI Packages
			
 
				+CLI=flowserver/cmd/flowserver
			
 
				+BIN=$(addprefix $(DIST)/, $(notdir $(CLI)))
			
 
				+
			
 
				+# Windows build
			
 
				+ifeq ($(GOOS),windows)
			
 
				+	ENV+=CC=i686-w64-mingw32-gcc CXX=i686-w64-mingw32-g++ CGO_ENABLED=1 GOOS=$(GOOS) GOARCH=$(GOARCH)
			
 
				+	BIN:=$(addsuffix .exe, $(BIN))
			
 
				+endif
			
 
				+
			
 
				+.PHONY: all deps clean dist-clean $(BIN)
			
 
				+
			
 
				+all: $(BIN)
			
 
				+	@$(ENV) echo -e "\e[32;01mBuilt for OS: `go env GOOS`, ARCH: `go env GOARCH`\e[0m"
			
 
				+	
			
 
				+$(BIN):  deps
			
 
				+	$(ENV) GOPATH="$(GOPATH)" go build -o $@ $(CLI)
			
 
				+
			
 
				+# generate
			
 
				+generate:
			
 
				+	GOPATH="$(GOPATH)" go generate ./src/...
			
 
				+
			
 
				+test:
			
 
				+	$(ENV) go test ./src/...
			
 
				+
			
 
				+#$(BIN): $(addprefix src/,$(SOURCE))
			
 
				+#	echo $<
			
 
				+
			
 
				+deps:
			
 
				+	$(ENV) GOPATH="$(GOPATH)" go get -v ./src/... # everything from source
			
 
				+	# test package 
			
 
				+	$(ENV) GOPATH="$(GOPATH)" go get -v -t ./src/...
			
 
				+
			
 
				+clean:
			
 
				+	rm -rf $(DIST)
			
 
				+
			
 
				+dist-clean: clean
			
 
				+	rm -rf bin
			
 
				+	rm -rf pkg
			
 
				+	rm -rf deps
			
 
				+
			
 
				+$(DIST):
			
 
				+	mkdir -p $(DIST)
			
 
				+
			
 
				+
			
--- a/go/src/flowserver/cmd/flowserver/main.go
+++ b/go/src/flowserver/cmd/flowserver/main.go
@@ -0,0 +1,15 @@
 
				+package main
			
 
				+
			
 
				+import (
			
 
				+	"flowserver"
			
 
				+
			
 
				+	"github.com/gohxs/prettylog"
			
 
				+)
			
 
				+
			
 
				+func main() {
			
 
				+	prettylog.Global()
			
 
				+
			
 
				+	f := flowserver.FlowServer{}
			
 
				+	f.ListenAndServe()
			
 
				+
			
 
				+}
			
--- a/go/src/flowserver/flowserver.go
+++ b/go/src/flowserver/flowserver.go
@@ -0,0 +1,56 @@
 
				+package flowserver
			
 
				+
			
 
				+import (
			
 
				+	"fmt"
			
 
				+	"log"
			
 
				+	"net"
			
 
				+	"net/http"
			
 
				+	"net/http/httputil"
			
 
				+	"net/url"
			
 
				+
			
 
				+	"github.com/gohxs/prettylog"
			
 
				+	"github.com/gohxs/webu"
			
 
				+	"github.com/gohxs/webu/chain"
			
 
				+)
			
 
				+
			
 
				+//go:generate go get dev.hexasoftware.com/hxs/genversion
			
 
				+//go:generate genversion -package flowserver -out version.go
			
 
				+
			
 
				+// FlowServer structure
			
 
				+type FlowServer struct{}
			
 
				+
			
 
				+//ListenAndServe starts the httpserver
			
 
				+func (f *FlowServer) ListenAndServe() error {
			
 
				+
			
 
				+	fsm := FlowSessionManager{}
			
 
				+
			
 
				+	// HttpPart
			
 
				+	c := chain.New(webu.ChainLogger(prettylog.New("req")))
			
 
				+	mux := http.NewServeMux()
			
 
				+	mux.Handle("/conn", c.Build(fsm.ServeHTTP))
			
 
				+
			
 
				+	proxyURL, err := url.Parse("http://localhost:8081")
			
 
				+	if err != nil {
			
 
				+		return err
			
 
				+	}
			
 
				+
			
 
				+	//mux.Handle("/", c.Build(webu.StaticHandler("web", "index.html")))
			
 
				+	mux.Handle("/", c.Build(httputil.NewSingleHostReverseProxy(proxyURL).ServeHTTP))
			
 
				+
			
 
				+	port := 4000
			
 
				+	for {
			
 
				+		addr := fmt.Sprintf(":%d", port)
			
 
				+		s, err := net.Listen("tcp", addr)
			
 
				+		if err != nil {
			
 
				+			log.Println("Listen error:", err)
			
 
				+			port++
			
 
				+			continue
			
 
				+		}
			
 
				+		log.Println("Listening at:", addr)
			
 
				+
			
 
				+		err = http.Serve(s, mux)
			
 
				+		if err != nil {
			
 
				+			log.Fatal(err)
			
 
				+		}
			
 
				+	}
			
 
				+}
			
--- a/go/src/flowserver/handlers.go
+++ b/go/src/flowserver/handlers.go
@@ -0,0 +1 @@
 
				+package flowserver
			
--- a/go/src/flowserver/session.go
+++ b/go/src/flowserver/session.go
@@ -0,0 +1,13 @@
 
				+package flowserver
			
 
				+
			
 
				+import (
			
 
				+	"github.com/gorilla/websocket"
			
 
				+)
			
 
				+
			
 
				+// FlowSession Create a session and link clients
			
 
				+//
			
 
				+type FlowSession struct {
			
 
				+	ID string // Random handle for sessionID
			
 
				+	// List of clients on this session
			
 
				+	clients []*websocket.Conn
			
 
				+}
			
--- a/go/src/flowserver/sessionmanager.go
+++ b/go/src/flowserver/sessionmanager.go
@@ -0,0 +1,108 @@
 
				+package flowserver
			
 
				+
			
 
				+import (
			
 
				+	"encoding/json"
			
 
				+	"log"
			
 
				+	"net/http"
			
 
				+	"sync"
			
 
				+
			
 
				+	"github.com/gorilla/websocket"
			
 
				+)
			
 
				+
			
 
				+//FlowSessionManager or FlowServerCore
			
 
				+type FlowSessionManager struct {
			
 
				+	// List of flow sessions?
			
 
				+	sessions map[string]*FlowSession
			
 
				+
			
 
				+	sync.Mutex
			
 
				+}
			
 
				+
			
 
				+//New creates a New initialized FlowSessionManager
			
 
				+func New() *FlowSessionManager {
			
 
				+	return &FlowSessionManager{
			
 
				+		sessions: map[string]*FlowSession{},
			
 
				+	}
			
 
				+}
			
 
				+func (fsm *FlowSessionManager) CreateSession() *FlowSession {
			
 
				+	fsm.Lock()
			
 
				+	defer fsm.Unlock()
			
 
				+	for {
			
 
				+		ID := RandString(10)
			
 
				+		sess, ok := fsm.sessions[ID]
			
 
				+		if !ok {
			
 
				+			fsm.sessions[ID] = sess
			
 
				+			return sess
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+}
			
 
				+
			
 
				+//LoadSession loads or creates a new Session
			
 
				+func (fsm *FlowSessionManager) LoadSession(ID string) *FlowSession {
			
 
				+	fsm.Lock()
			
 
				+	defer fsm.Unlock()
			
 
				+
			
 
				+	log.Println("Fetching session:", ID)
			
 
				+	sess, ok := fsm.sessions[ID]
			
 
				+	if !ok {
			
 
				+		sess = &FlowSession{ID: ID}
			
 
				+		fsm.sessions[ID] = sess
			
 
				+	}
			
 
				+	return sess
			
 
				+
			
 
				+}
			
 
				+
			
 
				+// FlowMessage Main message structure
			
 
				+type FlowMessage struct {
			
 
				+	OP   string          `json:"op"`
			
 
				+	Data json.RawMessage `json:"data"`
			
 
				+}
			
 
				+
			
 
				+var upgrader = websocket.Upgrader{}
			
 
				+
			
 
				+func (fsm *FlowSessionManager) ServeHTTP(w http.ResponseWriter, r *http.Request) {
			
 
				+	log.Println("Receiving ws connection")
			
 
				+	c, err := upgrader.Upgrade(w, r, nil)
			
 
				+	if err != nil {
			
 
				+		log.Println("upgrade:", err)
			
 
				+	}
			
 
				+	defer c.Close()
			
 
				+
			
 
				+	/////////////////
			
 
				+	// Message handling
			
 
				+	// ////////
			
 
				+
			
 
				+	for {
			
 
				+		mt, data, err := c.ReadMessage()
			
 
				+		if err != nil {
			
 
				+			log.Println("Err:", err)
			
 
				+			break
			
 
				+		}
			
 
				+		if mt != websocket.TextMessage {
			
 
				+			log.Println("Not a text message?")
			
 
				+			break
			
 
				+		}
			
 
				+
			
 
				+		fmsg := FlowMessage{}
			
 
				+		err = json.Unmarshal(data, &fmsg)
			
 
				+		if err != nil {
			
 
				+			log.Println("Err parsing message:", err)
			
 
				+			c.WriteJSON("bye")
			
 
				+		}
			
 
				+		switch fmsg.OP {
			
 
				+		case "newSession":
			
 
				+			log.Println("We want a new session so")
			
 
				+			sess := fsm.LoadSession("")
			
 
				+			sess.clients = append(sess.clients, c)
			
 
				+		}
			
 
				+		// Create a Session, assign us to session
			
 
				+
			
 
				+		// Switch kind of mesasge etc here
			
 
				+		// Acquire session ID, and send all the info
			
 
				+		// Write msg
			
 
				+		// Create or Load a session
			
 
				+
			
 
				+	}
			
 
				+	log.Println("ws Is disconnecting")
			
 
				+
			
 
				+}
			
--- a/go/src/flowserver/util.go
+++ b/go/src/flowserver/util.go
@@ -0,0 +1,30 @@
 
				+package flowserver
			
 
				+
			
 
				+import "math/rand"
			
 
				+
			
 
				+const letterBytes = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
			
 
				+const (
			
 
				+	letterIdxBits = 6                    // 6 bits to represent a letter index
			
 
				+	letterIdxMask = 1<<letterIdxBits - 1 // All 1-bits, as many as letterIdxBits
			
 
				+	letterIdxMax  = 63 / letterIdxBits   // # of letter indices fitting in 63 bits
			
 
				+)
			
 
				+
			
 
				+// RandString from stackoverflow
			
 
				+// https://stackoverflow.com/questions/22892120/how-to-generate-a-random-string-of-a-fixed-length-in-golang
			
 
				+func RandString(n int) string {
			
 
				+	b := make([]byte, n)
			
 
				+	// A rand.Int63() generates 63 random bits, enough for letterIdxMax letters!
			
 
				+	for i, cache, remain := n-1, rand.Int63(), letterIdxMax; i >= 0; {
			
 
				+		if remain == 0 {
			
 
				+			cache, remain = rand.Int63(), letterIdxMax
			
 
				+		}
			
 
				+		if idx := int(cache & letterIdxMask); idx < len(letterBytes) {
			
 
				+			b[i] = letterBytes[idx]
			
 
				+			i--
			
 
				+		}
			
 
				+		cache >>= letterIdxBits
			
 
				+		remain--
			
 
				+	}
			
 
				+
			
 
				+	return string(b)
			
 
				+}