divtools.js

// writing representations

function writeStateRep(container, rep, key) {
    var variable = rep.state[key]
    if (variable.isButton) {
        console.log('BUTTON!')
        var li = document.createElement('li')
        li.appendChild(document.createTextNode(variable.label))
        li.addEventListener('click', function() {
            // invert 
            if(rep.state[key].isPressed){
                rep.state[key].isPressed = false
            } else {
                rep.state[key].isPressed = true
            }
            putState(rep)
        })
        container.appendChild(li)
        return li 
    } else {
        if (typeof variable == 'string') {
            var li = document.createElement('li')
            li.appendChild(document.createTextNode(key))
            var input = document.createElement('input')
            input.type = 'text'
            input.size = 24
            input.value = variable
            input.addEventListener('change', function() {
                rep.state[key] = input.value
                putState(rep)
            })
            li.appendChild(input)
            container.appendChild(li)
            return input
        } else if (typeof variable == 'number') {
            var li = document.createElement('li')
            li.appendChild(document.createTextNode(key))
            var input = document.createElement('input')
            input.type = 'text'
            input.size = 24
            input.value = variable.toString()
            input.addEventListener('change', function() {
                rep.state[key] = parseFloat(input.value)
                putState(rep)
            })
            li.appendChild(input)
            container.appendChild(li)
            return input
        } else {
            console.log("unui'd type:", typeof variable)
        }
    }
}

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
}

// bezier utilities


function newBezier(x1, y1, x2, y2) {
    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 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)
}

function getOutputArrow(div) {
    var x = div.offsetParent.offsetLeft + div.offsetLeft + div.clientWidth
    var y = div.offsetParent.offsetTop + div.offsetTop + div.clientHeight / 2
    var pos = {
        x: x,
        y: y
    }

    return pos
}

function getInputArrow(div) {
    var x = div.offsetParent.offsetLeft
    var y = div.offsetParent.offsetTop + div.offsetTop + div.clientHeight / 2
    var pos = {
        x: x,
        y: y
    }

    return pos
}