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 (variable.isMultiLine) {
        console.log('MULTILINE!')
        var li = document.createElement('li')
        li.appendChild(document.createTextNode(variable.label))
        li.appendChild(document.createElement('br'))
        var txtArea = document.createElement('textarea')
        txtArea.rows = variable.rows
        txtArea.cols = 27
        txtArea.value = variable.value 
        txtArea.addEventListener('change', function(){
            rep.state[key].value = txtArea.value
            putState(rep)
        })
        li.appendChild(txtArea)
        container.appendChild(li)
        return txtArea
    } 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 if (typeof variable == 'object') {
            if (Array.isArray(variable)) {
                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() {
                    var arr = input.value.split(',')
                    arr.forEach(function(element, index, array) {
                        array[index] = parseFloat(element)
                    })
                    rep.state[key] = arr
                    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
}