getters and setters werk

client/client.js

@@ -10,6 +10,7 @@ var lastPos = {}
 
 // drawing / div-ing
 var wrapper = {}
+var dt = new DT() // div tools 
 
 // client fns
 
@@ -104,9 +105,9 @@ function buildMenu(tree) {
 }
 
 function addReps(reps){
+    // when adding links, we'll have to add all and then draw links
     for(rep in reps){
         addRep(reps[rep])
-        console.log(reps[rep])
     }
 }
 
@@ -137,36 +138,16 @@ function addRep(rep) {
     rep.ui.domElem = domElem
 
     // WRITE UI ELEMENTS 
-    var datElem = document.createElement('div')
-    datElem.className = 'inside'
-    var datui = new dat.GUI({ autoplace: false })
+    var uiElem = document.createElement('div')
+    uiElem.className = 'inside'
+
     // rolling through the json object 
+    console.log(rep)
     for (key in rep.state) {
-        // can handle up to one layer of nested objects
-        if (typeof rep.state[key] == 'object' && rep.state[key] !== null) {
-            var fold = datui.addFolder(key)
-            for (twokey in rep.state[key]) {
-                if (typeof rep.state[key][twokey] == 'object' && rep.state[key][twokey] !== null) {
-                    console.log('two layers of settings!')
-                } else {
-                    var newi = fold.add(rep.state[key], twokey)
-                    newi.folder = key.toString()
-                    newi.onFinishChange(function(value) {
-                        newState(rep)
-                    })
-                }
-            }
-            fold.open()
-        } else {
-            var newi = datui.add(rep.state, key)
-            newi.onFinishChange(function(value) {
-                newState(rep)
-            })
-        }
+        console.log(key)
     }
-    datElem.appendChild(datui.domElement)
+    rep.ui.domElem.appendChild(uiElem)
     // add this as well to the representation obj
-    rep.ui.dat = datui
 
     // WRITE INPUTS AND OUTPUTS 
     var inElem = document.createElement('div')
@@ -190,7 +171,7 @@ function addRep(rep) {
     // now we'll append our objects to the top level container
     domElem.appendChild(inElem)
     domElem.appendChild(outElem)
-    domElem.appendChild(datElem)
+    domElem.appendChild(uiElem)
     var clearElem = document.createElement('div')
     clearElem.className = 'clear'
     domElem.appendChild(clearElem)

client/divtools.js

+function DT() {
+
+	this.makeLineInput = (title, size) => {
+		var div = document.createElement('div')
+		div.className = 'uiText'
+		div.innerHTML = title
+
+		return {
+			domElem: div
+		}
+	}
+
+	return this 
+}
\ No newline at end of file

client/index.html

@@ -9,6 +9,7 @@
     <link href="style.css" rel="stylesheet">
     <script type="text/javascript" src="dat.gui.js"></script>
     <script type="text/javascript" src="dummies.js"></script>
+    <script type="text/javascript" src="divtools.js"></script>
     <script type="text/javascript" src="client.js"></script>
 </body>
 

server.js

@@ -39,7 +39,7 @@ wss.on('connection', (ws) => {
     // say hello
     socketSend('console', 'hello client')
     // send current config 
-    socketSend('put reps', modules)
+    sendModules()
     console.log('socket open on 8081')
     ws.on('message', (evt) => {
         socketRecv(evt)
@@ -110,6 +110,14 @@ var modules = new Array()
 var term = addModule('./src/ui/terminal.js')
 var gcode = addModule('./src/parsing/gcode.js')
 
+console.log('here setting term state txt to new txt')
+term.state.txt = "new txt"
+
+console.log('here setting term state text to new txt')
+term.state.text = "new text"
+
+gcode.state.g0speed = 1255
+
 term.outputs.lineOut.attach(gcode.inputs.lineIn)
 
 // to add UI vars to prgmem / save them
@@ -125,6 +133,13 @@ gcode.ui.top = 200
 
 console.log('modules at prgmem start', modules)
 
+function sendModules(){
+    for (md in modules){
+        console.log(modules[md].state)
+    }
+    socketSend('put reps', modules)
+}
+
 /*
 
 PROGRAM EDITING 
@@ -145,30 +160,24 @@ function addModule(path) {
         console.log('adding module', mod.description.name, 'id', mod.id)
 
         // get and set skullduggery 
-        for (item in mod.state) {
+        for (var item in mod.state) {
             // turn into 'don't f with' property
-            mod.state['_' + item] = mod.state[item]
-            // make oj ptr into object
-            mod.state[item] = {}
-            // write getter and setter for object
-            Object.defineProperty(mod.state, item, {
-                set: function(x) {
-                    this['_' + item] = x
-                    console.log('setting', item, 'to', x)
-                }
-            })
+            mod.state['_' + item.toString()] = mod.state[item]
+            // add a setter to hit _ when this 
+            addSetGet(mod.state, item)
+            // Object.defineProperty(mod.state, item, {
+            //     set: function(x) {
+            //         console.log(this['_' + item])
+            //         console.log(place)
+            //     }
+            // })
+            /*
             Object.defineProperty(mod.state, item, {
                 get: function() {
                     console.log('getting', item)
                     return this['_' + item]
                 }
             })
-            // HERE: 
-            /*
-            still: how do we use these setters in module? make .onChange type ?
-             - see terminal.js for hook example ? 
-            now we re-write server side to look for _objects, 
-            probably write our own setter? no more dat?
             */
         }
 
@@ -182,6 +191,21 @@ function addModule(path) {
     }
 }
 
+function addSetGet(obj, item){
+    Object.defineProperty(obj, item, {
+        set: function(x) {
+            this['_' + item] = x
+            console.log('SET', item, this['_' + item])
+        }
+    })
+    Object.defineProperty(obj, item, {
+        get: function() {
+            console.log('GET', item, this['_' + item])
+            return this['_' + item]
+        }
+    })
+}
+
 function newState(data) {
     // of one module 
     // should just recv all state, walk tree for differences

src/ui/terminal.js

@@ -12,6 +12,7 @@ function Terminal() {
 
     // object state
     this.state = {
+        txt: 'ln',
         text: 'line to out'
     }