diff --git a/README.md b/README.md
index df2ba7a1e8a6fa71a64ae9533fee6ece1ee0ce50..98cc4709b48a1155b494faf872dde5d990b4ce1a 100644
--- a/README.md
+++ b/README.md
@@ -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
diff --git a/client/client.js b/client/client.js
index fa9323d9c22bbc6850c36cf58a77fab1bfbffd83..a0561d4044aa0aceb82a08c289cd2052265051bb 100644
--- a/client/client.js
+++ b/client/client.js
@@ -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) {
diff --git a/client/divtools.js b/client/divtools.js
index ee000c89689232614b3ffd97b2a155fc348bec5f..f6b9eb3fb30967ca1348d91b0cd54c2bfb97b8b6 100644
--- a/client/divtools.js
+++ b/client/divtools.js
@@ -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
diff --git a/client/style.css b/client/style.css
index eaa14125a28ffa18ce81b2ee9adc89560a149914..4c3c94d6b1b5dc9b8b22b1b21d74bce30ae65605 100644
--- a/client/style.css
+++ b/client/style.css
@@ -1,6 +1,6 @@
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
diff --git a/views.js b/views.js
index 6f7416d1faa08c269edee89fda93913a243f5ea6..6ca1d5c515b15e360e01de36a93f791b649b86e0 100644
--- a/views.js
+++ b/views.js
@@ -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)