divtools.js

// writing representations

function writeStateRep(container, rep, key) {
    var variable = rep.state[key]
    switch (variable.type) {
        case 'button':
            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
            break
        case 'multiline':
            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
            break
        default:
            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)
            }
            break
    }
}

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
}