Skip to content
Snippets Groups Projects
Commit 5b920ebf authored by Jake Read's avatar Jake Read
Browse files

beziers begin

parent cc1e1935
Branches
No related tags found
No related merge requests found
......@@ -57,7 +57,7 @@ oncontextmenu = function(evt) {
// socket brkn
location.reload()
}
// prevents propogation to the os
// prevents event bubbling
return false
}
......@@ -101,91 +101,6 @@ 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 = {}
// 651
// 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)
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)
}
/*
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
......@@ -201,6 +116,10 @@ function addRep(rep) {
title.alt = rep.description.alt
domElem.appendChild(title)
// we'll hold on to this, useful!
rep.ui = {}
rep.ui.domElem = domElem
// using datgui to write the interface for state
var datElem = document.createElement('div')
datElem.className = 'inside'
......@@ -230,20 +149,27 @@ function addRep(rep) {
}
}
datElem.appendChild(datui.domElement)
// add this as well to the representation obj
rep.ui.dat = datui
// add the inputs and outputs
// get more involved here, do ln 241
var inElem = document.createElement('div')
inElem.className = 'inputs'
rep.ui.inputs = {}
for (ip in rep.inputs) {
var li = writeEventRep(rep, 'input', ip)
inElem.appendChild(li)
rep.ui.inputs[ip] = li
}
var outElem = document.createElement('div')
outElem.className = 'outputs'
rep.ui.outputs = {}
for (op in rep.outputs) {
var li = writeEventRep(rep, 'output', op)
outElem.appendChild(li)
rep.ui.outputs[op] = li
}
// now we'll append our objects to the top level container
......@@ -272,15 +198,94 @@ function addRep(rep) {
}
}
// adding to the original object these new tricks
rep.ui = {}
rep.ui.dat = datui
rep.ui.domElem = domElem
console.log(rep.ui)
reps.push(rep)
wrapper.appendChild(rep.ui.domElem)
}
var clkState = false
var oClk = {}
var tmpBz = {}
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
}
console.log('clicked', key)
evtConnectHandler(ipclk)
})
return li
}
function evtConnectHandler(clk) {
if (!clkState) {
// do output - input
oClk = clk
clkState = true
} else {
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
var y1 = parseInt(oClk.evt.target.offsetParent.style.top, 10) + oClk.evt.target.offsetTop + oClk.evt.target.clientHeight / 2
var x2 = parseInt(tClk.evt.target.offsetParent.style.left, 10) + tClk.evt.target.offsetLeft
var y2 = parseInt(tClk.evt.target.offsetParent.style.top, 10) + tClk.evt.target.offsetTop + tClk.evt.target.clientHeight / 2
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'
var svg = {}
// 651
// 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)
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)
}
/*
var crv = {}
document.addEventListener('mousemove', function(evt) {
modifyBezier(crv, 0, 0, evt.pageX, evt.pageY)
})
*/
function newState(rep) {
var data = {
id: rep.id,
......@@ -336,4 +341,6 @@ window.onload = function() {
/*
- add inputs and outputs
- ui for link inputs and outputs
- .. hold svg's in div of ui element rep.ui.domElement - also track endpts there, write tiny svg class ? then .onmove etc ties through to all elements ?
*/
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment