diff --git a/client/client.js b/client/client.js index 8319567f545179631320653d50d82df942c67276..aee399d4c1ff0497c0a8c589873c7f678724cb23 100644 --- a/client/client.js +++ b/client/client.js @@ -224,12 +224,14 @@ function writeEventRep(rep, type, key) { return li } +// input / output click handling function evtConnectHandler(clk) { if (!clkState) { - // do output - input + // first click oClk = clk clkState = true } else { + // second click var tClk = clk console.log(oClk, tClk) var x1 = parseInt(oClk.evt.target.offsetParent.style.left, 10) + oClk.evt.target.offsetLeft + oClk.evt.target.clientWidth @@ -239,14 +241,6 @@ function evtConnectHandler(clk) { var bz = newBezier(x1, y1, x2, y2) clkState = false } - - // var x = parseInt(clk.evt.target.offsetParent.style.left, 10) + clk.evt.target.offsetLeft + clk.evt.target.clientWidth - // var y = parseInt(clk.evt.target.offsetParent.style.top, 10) + clk.evt.target.offsetTop + clk.evt.target.clientHeight / 2 - // var tmpBz = newBezier(x, y, clk.evt.clientX, clk.evt.clientY) - // // function bzMoveMod(evt) { - // modifyBezier(tmpBz, x, y, evt.clientX, evt.clientY) - // } - // document.addEventListener('mousemove', bzMoveMod) } var svgns = 'http://www.w3.org/2000/svg' @@ -256,26 +250,38 @@ var svg = {} // 1554 function newBezier(x1, y1, x2, y2) { - var bz = document.createElementNS(svgns, 'path') - bz.style.stroke = '#1a1a1a' - bz.style.fill = 'none' - bz.style.strokeWidth = '7px' - 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) - - console.log(bz) - + var bz = {} + bz.elem = document.createElementNS(svgns, 'path') + bz.elem.style.stroke = '#1a1a1a' + bz.elem.style.fill = 'none' + bz.elem.style.strokeWidth = '7px' + bz.x1 = x1 + bz.y1 = y1 + bz.x2 = x2 + bz.y2 = y2 + redrawBezier(bz) + svg.appendChild(bz.elem) return bz } -function modifyBezier(bz, x1, y1, x2, y2) { - var bl = Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2)) * 0.6 - var ps = 'M ' + x1 + ' ' + y1 + ' C ' + (x1 + bl) + ' ' + y1 - var pe = ' ' + (x2 - bl) + ' ' + y2 + ' ' + x2 + ' ' + y2 - bz.setAttribute('d', ps + pe) + +function redrawBezier(bz) { + var bl = Math.sqrt(Math.pow((bz.x1 - bz.x2), 2) + Math.pow((bz.y1 - bz.y2), 2)) * 0.6 + var ps = 'M ' + bz.x1 + ' ' + bz.y1 + ' C ' + (bz.x1 + bl) + ' ' + bz.y1 + var pe = ' ' + (bz.x2 - bl) + ' ' + bz.y2 + ' ' + bz.x2 + ' ' + bz.y2 + bz.elem.setAttribute('d', ps + pe) +} + +function modifyBezierHead(bz, x1, y1){ + bz.x1 = x1 + bz.y1 = y1 + redrawBezier(bz) +} + +function modifyBezierTail(bz, x2, y2){ + bz.x2 = x2 + bz.y2 = y2 + redrawBezier(bz) } /*