big mess on ui

client/client.js

@@ -8,6 +8,9 @@ var reps = new Array()
 var sckt = {}
 var lastPos = {}
 
+// drawing / div-ing
+var wrapper = {}
+
 // client fns
 
 function socketSend(type, data) {
@@ -75,18 +78,18 @@ function buildMenu(tree) {
             li.addEventListener('click', function(evt) {
                 var data = this.id
                 socketSend('add module', data)
-                document.body.removeChild(document.getElementById('menu'))
+                wrapper.removeChild(document.getElementById('menu'))
             })
             ul.appendChild(li)
         }
         menuDom.appendChild(ul)
     }
-    document.body.append(menuDom)
+    wrapper.append(menuDom)
 
     function rmListener(evt) {
         var findMenu = document.getElementById('menu')
         if (findMenu !== null && findMenu.id == 'menu') {
-            document.body.removeChild(findMenu)
+            wrapper.removeChild(findMenu)
         }
     }
 
@@ -98,6 +101,86 @@ function get(data) {
 
 }
 
+function writeEventRep(rep, type, key) {
+    var li = document.createElement('li')
+    li.innerHTML = key.toString()
+    li.id = rep.id + ' ' + type + ' ' + key
+    li.addEventListener('click', (evt) => {
+        var ipclk = {
+            rep: rep,
+            type: type,
+            name: key,
+            evt: evt
+        }
+        evtConnectHandler(ipclk)
+    })
+    return li
+}
+
+var inClkState = false
+var clkOne = {}
+
+// ok, nearly ... but want better everything. so messy! 
+// need different x, y for outputs, overall better way to get position
+// and consider when moving div, wtf?
+
+function evtConnectHandler(clk){
+    if(!inClkState){
+        oClk = clk
+        inClkState = true
+        var parent = clk.evt.target.offsetParent
+        var offset = clk.evt.target.offsetTop
+        var x = parseInt(clk.evt.target.offsetParent.style.left, 10)
+        var y = parseInt(clk.evt.target.offsetParent.style.top, 10) + clk.evt.target.offsetTop + clk.evt.target.clientHeight/2
+        startBezier(x, y, clk)
+    } else {
+        inClkState = false
+    }
+}
+
+function startBezier(x, y, clk){
+    if(clk.type == 'output'){
+        var bezier = newBezier(x, y, clk.evt.clientX, clk.evt.clientY)
+        console.log(bezier)
+        function bzMoveMod(evt){
+            modifyBezier(bezier, x, y, evt.clientX, evt.clientY)
+        }
+        document.addEventListener('mousemove', bzMoveMod)
+    }
+}
+
+var svgns = "http://www.w3.org/2000/svg";
+var svg = {}
+
+function newBezier(x1, y1, x2, y2) {
+    var bz = document.createElementNS(svgns, 'path')
+    bz.style.stroke = '#000'
+    bz.style.fill = 'none'
+    bz.style.strokeWidth = '2px'
+    var bl = Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2)) * 0.4
+    var ps = 'M ' + x1 + ' ' + y1 + ' C ' + (x1 + bl) + ' ' + y1
+    var pe = ' ' + (x2 - bl) + ' ' + y2 + ' ' + x2 + ' ' + y2
+    bz.setAttribute('d', ps + pe)
+    svg.appendChild(bz)
+
+    return bz
+}
+
+function modifyBezier(bz, x1, y1, x2, y2) {
+    var bl = Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2)) * 0.4
+    var ps = 'M ' + x1 + ' ' + y1 + ' C ' + (x1 + bl) + ' ' + y1
+    var pe = ' ' + (x2 - bl) + ' ' + y2 + ' ' + x2 + ' ' + y2
+    bz.setAttribute('d', ps + pe)
+}
+
+/*
+var crv = {}
+
+document.addEventListener('mousemove', function(evt) {
+    modifyBezier(crv, 0, 0, evt.pageX, evt.pageY)
+})
+*/
+
 // write html from json representation
 function addRep(rep) {
     // a div to locate it 
@@ -147,28 +230,17 @@ function addRep(rep) {
     var inElem = document.createElement('div')
     inElem.className = 'inputs'
     for (ip in rep.inputs) {
-        var li = document.createElement('li')
-        li.innerHTML = ip.toString()
-        li.id = ip.toString()
-        li.addEventListener('click', function(evt) {
-            console.log('in clk')
-        })
+        var li = writeEventRep(rep, 'input', ip)
         inElem.appendChild(li)
     }
 
     var outElem = document.createElement('div')
     outElem.className = 'outputs'
     for (op in rep.outputs) {
-        var li = document.createElement('li')
-        li.innerHTML = op.toString()
-        li.id = op.toString()
-        li.addEventListener('click', function(evt) {
-            console.log('out clk')
-        })
+        var li = writeEventRep(rep, 'output', op)
         outElem.appendChild(li)
     }
 
-
     // now we'll append our objects to the top level container
     domElem.appendChild(inElem)
     domElem.appendChild(outElem)
@@ -201,7 +273,7 @@ function addRep(rep) {
     rep.ui.domElem = domElem
 
     reps.push(rep)
-    document.body.append(rep.ui.domElem)
+    wrapper.appendChild(rep.ui.domElem)
 }
 
 function newState(rep) {
@@ -216,6 +288,19 @@ function newState(rep) {
 // init & hookup
 
 window.onload = function() {
+    svg = document.createElementNS(svgns, 'svg')
+    svg.setAttribute('width', '100%')
+    svg.setAttribute('height', '100%')
+    document.body.appendChild(svg)
+
+    wrapper = document.createElement('div')
+    wrapper.id = 'wrapper'
+    document.body.append(wrapper)
+
+    crv = newBezier(10, 10, 100, 100)
+
+
+
     const socket = new WebSocket('ws://localhost:8081')
 
     socket.onopen = function(evt) {

client/style.css

@@ -7,7 +7,7 @@ body {
 .block {
 	width: auto;
 	position: absolute;
-	padding: 3px;
+	padding: 0px;
 	padding-bottom: 23px;
     background-color: #303030;
 }
@@ -21,9 +21,9 @@ body {
 }
 
 .inputs {
-	width: 55px;
+	width: 58px;
 	float: left;
-	padding-left: 5px;
+	margin-left: 2px;
 	font-size: 11px;
 	background-color: #1a1a1a;
 	color: #eee;
@@ -38,9 +38,9 @@ body {
 }
 
 .outputs {
-	width: 55px;
+	width: 58px;
 	float: right;
-	padding-right: 5px;
+	margin-right: 2px;
 	text-align: right;
 	font-size: 11px;
 	background-color: #1a1a1a;
@@ -54,13 +54,20 @@ body {
 ul {
 	list-style-type: none;
 	color: #eee;
-	padding: 7px 0 7px;
+	padding: 7px 0 7px 0;
 }
 
 li {
 	list-style-type: none;
 	color: #eee;
-	padding: 7px 0 7px;
+	padding: 7px 5px 6px 5px;
+	border-bottom: 1px;
+	border-bottom-style: solid;
+	border-color: #303030;
+}
+
+li:hover{
+	background-color: #000;
 }
 
 #menu {