Commit 26f873c0 authored by Jake Read's avatar Jake Read

nearly through: about to add module deletion

parent 94cc5429
......@@ -16,6 +16,7 @@ This project serves the developement environment / api we use to write and repre
## For MW
- rick click on menu bar to delete module
- delete module ? then we're done ...
- walk program units and change
- what program units do we want?
......@@ -34,7 +35,6 @@ This project serves the developement environment / api we use to write and repre
- UI desires
- off-screen divs get pointers-to so that we don't get lost
- 'h' or something to zoom-to-extents
- highlight wires
- GIFS
- load a program
......
......@@ -317,7 +317,11 @@ function redrawLinks() {
var inputUi = program.modules[toId].ui.inputs[toKey]
var outPos = getOutputArrow(outputUi)
var inPos = getInputArrow(inputUi)
var bz = newBezier(outPos.x, outPos.y, inPos.x, inPos.y)
if (inputUi.isHovering || outputUi.isHovering) {
var bz = newBezier(outPos.x, outPos.y, inPos.x, inPos.y, true)
} else {
var bz = newBezier(outPos.x, outPos.y, inPos.x, inPos.y, false)
}
}
}
}
......@@ -429,20 +433,28 @@ function mouseUpDragListener(evt) {
// get json menu item and render
// and ask for module at /obj/key
oncontextmenu = function(evt) {
if (sckt) {
socketSend('get module menu', '')
console.log(evt.target)
if (evt.target.className == 'modname') {
var modRep = program.modules[evt.target.innerHTML]
if (modRep) {
writeModuleOptionMenu(modRep)
}
} else {
// socket brkn, reload page
location.reload()
if (sckt) {
socketSend('get module menu', '')
} else {
// socket brkn, reload page
location.reload()
}
// prevents event bubbling
}
// prevents event bubbling
return false
}
onmousemove = function(evt){
onmousemove = function(evt) {
var cT = getCurrentTransform()
lastPos.x = cT.ox - cT.tx + (evt.pageX - cT.ox)/cT.s
lastPos.y = cT.oy - cT.ty + (evt.pageY - cT.oy)/cT.s
lastPos.x = cT.ox - cT.tx + (evt.pageX - cT.ox) / cT.s
lastPos.y = cT.oy - cT.ty + (evt.pageY - cT.oy) / cT.s
}
document.onkeydown = function(evt) {
......@@ -466,12 +478,52 @@ document.onkeydown = function(evt) {
}
}
function writeModuleOptionMenu(modRep) {
var menuDom = document.createElement('div')
menuDom.id = 'perModuleMenu'
menuDom.style.left = 10 + modRep.ui.domElem.offsetLeft + modRep.ui.domElem.offsetWidth + 'px'
menuDom.style.top = modRep.ui.domElem.offsetTop + 'px'
// future: rm all inputs, rm all outputs, rename, open (heirarchy)
var opts = ['delete', 'copy']
for (i in opts) {
var li = document.createElement('li')
li.innerHTML = opts[i]
li.id = opts[i]
if (opts[i] == 'delete') {
li.addEventListener('click', function(evt) {
var data = {
id: modRep.description.id
}
socketSend('remove module', data)
wrapper.removeChild(document.getElementById('perModuleMenu'))
})
} else if (opts[i] == 'copy') {
li.addEventListener('click', function(evt) {
var data = modRep.description.path
socketSend('put module', data)
wrapper.removeChild(document.getElementById('perModuleMenu'))
})
}
menuDom.appendChild(li)
}
wrapper.append(menuDom)
function rmListener(evt) {
var findMenu = document.getElementById('perModuleMenu')
if (findMenu != null && findMenu.id == 'perModuleMenu') {
wrapper.removeChild(findMenu)
}
evt.target.removeEventListener(evt.type, arguments.callee)
}
document.addEventListener('click', rmListener)
}
// return ul element with name and alt and link?
// TODO: not properly a tree, see note @ reciprocal fn in views.js
function heapSendsModuleMenu(tree) {
var menuDom = document.createElement('div')
menuDom.id = 'moduleMenu'
console.log(lastPos)
menuDom.style.left = lastPos.x + 'px'
menuDom.style.top = lastPos.y + 'px'
for (key in tree) {
......
......@@ -16,6 +16,34 @@ function addRepToView(rep) {
title.className = 'modname'
title.innerHTML = rep.description.id
title.alt = rep.description.alt
// MOVEABOUT CODE
title.onmousedown = function(evt) {
evt.preventDefault()
evt.stopPropagation()
offsetX = evt.clientX - domElem.getBoundingClientRect().left
offsetY = evt.clientY - domElem.getBoundingClientRect().top
function domElemMouseMove(evt) {
evt.preventDefault()
evt.stopPropagation()
var cT = getCurrentTransform()
domElem.style.left = parseFloat(domElem.style.left) + evt.movementX / cT.s + 'px'
domElem.style.top = parseFloat(domElem.style.top) + evt.movementY / cT.s + 'px'
redrawLinks()
}
function rmOnMouseUp(evt) {
rep.description.position.left = parseInt(domElem.style.left, 10)
rep.description.position.top = parseInt(domElem.style.top, 10)
putUi(rep)
document.removeEventListener('mousemove', domElemMouseMove)
document.removeEventListener('mouseup', rmOnMouseUp)
}
document.addEventListener('mousemove', domElemMouseMove)
document.addEventListener('mouseup', rmOnMouseUp)
}
domElem.appendChild(title)
var uiSetFlag
......@@ -36,7 +64,7 @@ function addRepToView(rep) {
rep.description.position.top = lastPos.y
}
if(rep.ui == null){
if (rep.ui == null) {
rep.ui = {}
}
......@@ -79,34 +107,8 @@ function addRepToView(rep) {
clearElem.className = 'clear'
domElem.appendChild(clearElem)
// MOVEABOUT CODE
title.onmousedown = function(evt) {
offsetX = evt.clientX - domElem.getBoundingClientRect().left
offsetY = evt.clientY - domElem.getBoundingClientRect().top
function domElemMouseMove(evt) {
evt.preventDefault()
evt.stopPropagation()
var cT = getCurrentTransform()
domElem.style.left = parseFloat(domElem.style.left) + evt.movementX/cT.s + 'px'
domElem.style.top = parseFloat(domElem.style.top) + evt.movementY/cT.s + 'px'
redrawLinks()
}
function rmOnMouseUp(evt){
rep.description.position.left = parseInt(domElem.style.left, 10)
rep.description.position.top = parseInt(domElem.style.top, 10)
putUi(rep)
document.removeEventListener('mousemove', domElemMouseMove)
document.removeEventListener('mouseup', rmOnMouseUp)
}
document.addEventListener('mousemove', domElemMouseMove)
document.addEventListener('mouseup', rmOnMouseUp)
}
wrapper.appendChild(rep.ui.domElem)
if(uiSetFlag){
if (uiSetFlag) {
putUi(rep)
}
}
......@@ -125,6 +127,22 @@ function writeEventRep(rep, type, key) {
console.log('clicked', key)
evtConnectHandler(ipclk)
})
li.addEventListener('mouseover', (evt) => {
if (type == 'input') {
rep.ui.inputs[key].isHovering = true
} else if (type == 'output') {
rep.ui.outputs[key].isHovering = true
}
redrawLinks()
li.addEventListener('mouseout', (evt) => {
if (type == 'input') {
rep.ui.inputs[key].isHovering = false
} else if (type == 'output') {
rep.ui.outputs[key].isHovering = false
}
redrawLinks()
})
})
return li
}
......@@ -220,10 +238,14 @@ function writeStateRep(container, rep, key) {
var svgns = 'http://www.w3.org/2000/svg'
var svg = {}
function newBezier(x1, y1, x2, y2) {
function newBezier(x1, y1, x2, y2, highlight) {
var bz = {}
bz.elem = document.createElementNS(svgns, 'path')
bz.elem.style.stroke = '#1a1a1a'
if (highlight) {
bz.elem.style.stroke = '#fcd17b'
} else {
bz.elem.style.stroke = '#1a1a1a'
}
bz.elem.style.fill = 'none'
bz.elem.style.strokeWidth = '7px'
bz.x1 = x1
......
body {
background-color: #d6d6d6;
font-family: Lucia Grande, sans-serif;
font-family: Palatino, serif;
font-size: 11px;
}
......@@ -17,13 +17,19 @@ body {
}
.modname {
font-size: 13px;
padding-left:60px;
font-size: 15px;
font-weight: bold;
font-style: italic;
padding-left:89px;
padding-top: 7px;
padding-bottom: 7px;
color: #eee;
}
.modname:hover{
background-color: #969696;
}
.inputs {
width: 78px;
float: left;
......@@ -110,4 +116,11 @@ li:active{
width: 245px;
padding: 10px;
background-color: #303030;
}
#perModuleMenu {
position: absolute;
width: 80px;
padding: 3px;
background-color: #303030;
}
\ No newline at end of file
......@@ -99,6 +99,9 @@ function socketRecv(evt) {
case 'put module':
uiRequestNewModule(data)
break
case 'remove module':
uiRequestRemoveModule(data)
break
case 'put state change':
uiRequestStateChange(data)
break
......@@ -224,6 +227,10 @@ function uiRequestNewModule(data) {
socketSend('put module', Reps.makeFromModule(program.modules[keys[keys.length - 1]]))
}
function uiRequestRemoveModule(data){
console.log('UI REQUEST TO REMOVE MODULE', data.id)
}
function uiRequestStateChange(data) {
console.log('UI REQUEST CHANGE STATE IN MODULE', data)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment