diff --git a/client/client.js b/client/client.js
index e7fe1eeccc2fc34f5dddcdd07fb36c8417765674..54e46d01710a6bdcf196006b73f04d6ae33a6347 100644
--- a/client/client.js
+++ b/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) {
diff --git a/client/style.css b/client/style.css
index 487e8730f7e21eb4be98005d45ac26c244244348..e1343170605436b67a8a2ddd9d5dfe34715f8b70 100644
--- a/client/style.css
+++ b/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 {