From bb022dd16e83861630cae01bb9562c8fea016b4c Mon Sep 17 00:00:00 2001 From: Jake <jake.read@cba.mit.edu> Date: Mon, 29 Apr 2019 17:24:11 -0400 Subject: [PATCH] episode 4 season 2: or: commit before a ruthless dismissal of ye olden codes: or: the battle of the view --- README.md | 42 ++++++++++++++++------------- bootstrap.js | 14 ++-------- hunks/manager.js | 18 +++++-------- hunks/view.js | 70 +++++++++++++++++++++++++++++++++--------------- index.html | 3 --- style.css | 6 ++++- typeset.js | 17 ++++++------ 7 files changed, 95 insertions(+), 75 deletions(-) diff --git a/README.md b/README.md index 1f13d02..acfc87c 100644 --- a/README.md +++ b/README.md @@ -16,30 +16,36 @@ Native Cuttlefish 'Hunks' are given access to a DOM/div element, making them nic At the moment, working on serialization, and a reduction of the manager's role. This probably means migrating much messiness to view.js and making manager.js straightforward, to the point where we can expect to write manager.cpp w/o great pain, strife. - -> implementing byteArray messages between view / manager. what are the message types? - -> hello type, - -> byteArray ... but also ... dom hooks ? QQQ ?? WIPWIPWIP do it from inside the dom ... by own id and jquery $(glasses)$ - -> the hunk description-tree ... start there? nah, start at hello-world key-traverse - -> while you're writing ... add / rm link goes by keyname, not name = "" and so it is borked +OK, I'm closing in on the serialization struggle. I want to finally write down the list of messages that I'd like to assemble from, write those out, and then just go through assembling shit in the dom. I'll break things and fix them as I do. - *party thyme* +I'm very close, though, and want to focus. I should be talking to a nautilus manager tonight and prototyping how I want remote resources to open up from cuttlefish. -## Messages to Handle +-> manager cleanup, ref to old code ... + - refresh button in th view, + - refresh wipes and then asks for currently-running program, + - manager responds with 'describe self' containing a top level descr, numhunks, numlinks ... view with some state about that ... -msg -> hello -> (response)(string name) - listHunks -> (response)(string list) - addHunk -> default -> (expects string) - with state -> (expects string and ?) - removeHunk -> (expects string) - addLink -> (expects string, string, string, string) - removeLink -> (expects string, string, string, string) +Here's my list of things I think I will need ... -msg -> addDef -> (id, name) -> inputs -> (len)(str name, type val) - outputs -> (str name, type val) - state -> (str name, type val) +## Views can send ... -msg -> addLink -> (id, name, id, name) +hello -> eom +reqprogram -> eom +reqlistavail -> eom +reqaddhunk -> (string) name +reqstatechange -> (string) hunkid, (uint8) index, (type) value +reqaddlink -> (string) outId, (uint8) otpi, (string) inId, (uint8) inpti + +## Managers can reply ... + +brief -> (string) interpreter, (uint16) numhunks, (uint16) numlinks +listofavail -> (list of strings) +hunkalive -> (hunk serialization) +hunkremoved -> (string) id +hunkstatechange -> (state change args) +linkalive -> (link args) +linkremoved -> (link args) --- diff --git a/bootstrap.js b/bootstrap.js index 087be5c..dc6bc8b 100644 --- a/bootstrap.js +++ b/bootstrap.js @@ -20,7 +20,6 @@ NROL.name = 'manager' NROL.id = 'NROL39_0' NROL.init() // this is going to sit in the outbuffer until the view resolves -NROL.sendHunkAsDef(NROL) function bootloop() { // js u wyldin ! @@ -44,19 +43,10 @@ window.onload = () => { $('#wrapper').get(0).append(View.dom) }).then(() => { NROL.addLink(View.id, 'msgs', NROL.id, 'msgs') - }).then(() => { NROL.addLink(NROL.id, 'msgs', View.id, 'msgs') - // ... how do we setup init routines for views / connections ? - // NROL.describeRunningProgram() bootloop() - // and then we can load this program - /* - NROL.addProgram('mvnv').then((newHunks) => { - // auto added to view (should be) - }).catch((err) => { - console.log('ERR on opening bootstrap program:', err) - }) - */ + // kick this later + setTimeout(View.refresh, 150) }).catch((err) => { console.log(err) }) diff --git a/hunks/manager.js b/hunks/manager.js index 0839b29..cd9d1bc 100644 --- a/hunks/manager.js +++ b/hunks/manager.js @@ -39,7 +39,7 @@ function Manager() { let errmsg = (message) => { // also log this for chrissake - console.log('ERRMSG', message) + console.log('MANAGER ERRMSG', message) // only do this if the message is < 256b ? let msg = new Array() msg.push(MK.ERR) @@ -69,7 +69,7 @@ function Manager() { this.describeRunningProgram = () => { for (let hnk in hunks) { this.sendHunkAsDef(hunks[hnk]) - } + } // and also links, } this.sendHunkAsDef = (hunk) => { @@ -318,7 +318,7 @@ function Manager() { /* --------------------------- ---------------------------- */ this.addLink = (outHunkId, outputName, inHunkId, inputName) => { - // sync, doesn't need to be a promise + // synchronous, doesn't need to be a promise let outHunk = hunks.find((hunk) => { return hunk.id == outHunkId }) @@ -352,13 +352,7 @@ function Manager() { } else { if (verbose) this.log(`hooking ${outHunk.id}, ${otp.name} to ${inHunk.id}, ${inp.name}`) otp.attach(inp, inHunk.id) - // should be verbatim, so - writeMessage('putlink', { - outId: outHunkId, - outName: outputName, - inId: inHunkId, - inName: inputName - }) + // ok we gucc, return true } } @@ -366,7 +360,7 @@ function Manager() { this.addLinkByObject = (fromHunk, outputName, toHunk, inputName) => { // TODO: not throwing errors when outputname does not exist // I.E. addLink doesn't actually use 'name' property, it uses [key] - this.addLink(fromHunk.id, outputName, toHunk.id, inputName) + return this.addLink(fromHunk.id, outputName, toHunk.id, inputName) } this.removeLink = (outHunkId, outputName, inHunkId, inputName) => { @@ -516,7 +510,7 @@ function Manager() { // rules: bytes in this switch, objects elsewhere ? switch (msg[0]) { case MK.HELLO: - writeMessage([MK.HELLORESPONSE]) + writeMessage([MK.HELLO]) break case MK.DESCRIBESELF: resp.push(MK.BRIEF) diff --git a/hunks/view.js b/hunks/view.js index 7af3876..f7b057c 100644 --- a/hunks/view.js +++ b/hunks/view.js @@ -49,8 +49,10 @@ function View() { this.plane = {} // a handy box, for stuff this.msgbox = {} - let ze = {} - + // and things inside of it, + let zoomExtentsCheckbox = {} + let refreshButton = {} + // also some verifiable state /* --------------------------- ---------------------------- */ /* -------------------- INIT, LISTENERS ---------------------- */ /* --------------------------- ---------------------------- */ @@ -64,16 +66,26 @@ function View() { this.plane = $('<div>').addClass('plane').get(0) // to log, type, etc this.msgbox = $('<div>').addClass('msgbox').get(0) + // a refresh plane + refreshButton = $('<div>').addClass('msgboxbutton').addClass('msgboxmsg').append('~ refresh view ~').get(0) + $(refreshButton).click((evt) => { + this.refresh() + }) + this.msgbox.append(refreshButton) + // HERE ... uuuh ... messages .. annealing ... refresh routine ... manager sending lists ... sending links ... + // delete a bunch of shiiiit ... also in the manager + // maybe start the cleanup by writing in dummy switch statements, then fleshing those out one by one + // zoom extents object, - ze = $('<input/>').attr({ + zoomExtentsCheckbox = $('<input/>').attr({ type: 'checkbox' }).prop('checked', true).get(0) - $(ze).change(() => { - if ($(ze).prop('checked')) { + $(zoomExtentsCheckbox).change(() => { + if ($(zoomExtentsCheckbox).prop('checked')) { zoomExtents() } }) - this.msgbox.append($('<div>').addClass('msgboxmsg').append(ze).append('zoom extents ?').get(0)) + this.msgbox.append($('<div>').addClass('msgboxmsg').append(zoomExtentsCheckbox).append('zoom extents ?').get(0)) // init transform let dft = { @@ -118,20 +130,29 @@ function View() { if (this.id === 'TLView') { document.addEventListener('keydown', (evt) => { if (evt.key === 'l') { - writemessage('addhunk', 'link') + writeMessage('addhunk', 'link') } else if (evt.key === 'c') { - writemessage('addprogram', 'ntlink') + writeMessage('addprogram', 'ntlink') } else if (evt.key === 'v') { - writemessage('addprogram', 'llink') + writeMessage('addprogram', 'llink') } else if (evt.keyCode === 27) { // escapekey $(this.plane).children('.contextmenu').remove() + // also find floaters ... } }) } } // END INIT CODE + this.refresh = () => { + // wipe ya docs, and ask yonder manager for a complete description + console.log("WRITE THIS: refresh should wipe current screen first!") + let msg = [MK.HELLO] + writeMessage(msg) + // that's fine, we can wait for a response, but we have to track and setup the next move + } + let writeToMessageBox = (data) => { // write the message this.msgbox.append($('<div> -> ' + data + '</div>').addClass('msgboxmsg').get(0)) @@ -232,7 +253,7 @@ function View() { y: evt.layerY - ct.y * ct.s }) $(this.plane).append(menu) - writemessage([MK.REQLISTAVAIL]) + writeMessage([MK.REQLISTAVAIL]) } let addContextOptions = (list) => { @@ -249,7 +270,7 @@ function View() { let msg = new Array() msg.push(MK.REQADDHUNK) MSGS.writeTo(msg, text, 'string') - writemessage(msg) + writeMessage(msg) $(item).append(' > requested ...') }) return item @@ -556,7 +577,7 @@ function View() { let outName = output.id.substring(output.id.indexOf('_output_') + 8) let inId = conn.substring(1, conn.indexOf('_input_')) let inName = conn.substring(conn.indexOf('_input_') + 7) - writemessage('removelink', { + writeMessage('removelink', { outId: outId, outName: outName, inId: inId, @@ -584,7 +605,7 @@ function View() { return nameresp.increment + typeresp.increment } - let defBySerial = (bytes) => { + let defBySerial = (bytes, start) => { // deserialize let def = {} // inputs, outputs, state @@ -594,7 +615,7 @@ function View() { // hold, let temp // starting at 2, msgs[0] is 'hnkalive' - let i = 1 + let i = start // ripperoni, outer: while(i < bytes.length){ switch (bytes[i]){ @@ -650,6 +671,7 @@ function View() { let match = $(this.plane).find('#' + def.id).get(0) let menu = $(this.plane).children('.contextmenu').get(0) if (match !== undefined) { + // we have one already, we are likely updating it mt = readTransform(match) $(match).remove() } else if (menu !== undefined) { @@ -803,14 +825,14 @@ function View() { }) $(this.plane).append(menu) $(menu).append($('<li>remove hunk</li>').on('click', (evt) => { - writemessage('removehunk', { + writeMessage('removehunk', { id: def.id, name: def.name }) $(menu).remove() })) $(menu).append($('<li>copy hunk</li>').on('click', (evt) => { - writemessage('addhunk', def.name) + writeMessage('addhunk', def.name) $(menu).remove() })) } @@ -921,7 +943,7 @@ function View() { let id = str.substring(0, next) console.log('and id', id) // HERE this is current stifle, an awkward message, I think ? - writemessage('addlink', { + writeMessage('addlink', { outId: def.id, outName: port.name, inId: id, @@ -974,7 +996,7 @@ function View() { strinput.addEventListener('change', (evt) => { // ask for a change, // TODO HERE NOW: this is the state change request you want to write - // do it like writemessage() instead + // do it like writeMessage() instead // requestStateChange(def.id, state, strinput.value) // but assert that we don't change the definition unless requestStateChange(def.id, state, strinput.value) @@ -1018,7 +1040,7 @@ function View() { } let requestStateChange = (parentid, state, value) => { - writemessage('statechange', { + writeMessage('statechange', { id: parentid, name: state.name, value: value @@ -1051,7 +1073,7 @@ function View() { let outmsgbuffer = new Array() - let writemessage = (bytes) => { + let writeMessage = (bytes) => { if (!msgsout.io && outmsgbuffer.length < 1) { // str8 shooters if (msgverbose) this.log('msg out', bytes) @@ -1079,6 +1101,9 @@ function View() { // ok, switch(msg[0]) { + case MK.ERR: + writeToMessageBox(MSGS.readFrom(msg, 1, 'string').item) + break case MK.HELLORESPONSE: writeToMessageBox('manager responds OK') break @@ -1089,9 +1114,12 @@ function View() { break case MK.HUNKALIVE: console.log('hunk alive, going to deserialize') - let def = defBySerial(msg) + let def = defBySerial(msg, 1) putDef(def) break + case MK.HUNKSTATECHANGE: + console.error('hunkstatechange serialized doth not written') + break default: throw new Error(`view receives message with no switch: ${msg[0]}`) } diff --git a/index.html b/index.html index 1fb87b0..bf09623 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,6 @@ <script src="d3.js"></script> <script type="module" src="bootstrap.js"></script> - <div id="nav"> - <a href="https://gitlab.cba.mit.edu/squidworks/cuttlefish">cuttlefish</a> | WIP4EVER | - </div> <div id="wrapper"> <!-- bootloop puts first view inside of this div --> </div> diff --git a/style.css b/style.css index 2465b87..e247d4a 100644 --- a/style.css +++ b/style.css @@ -64,13 +64,17 @@ body { } .msgboxmsg{ - padding: 3px; + padding: 8px; margin-bottom: 3px; background-color: white; font-family: Courier; font-size: 11px; } +.msgboxbutton:hover{ + background-color: blue; +} + .plane { position: absolute; width: 100px; diff --git a/typeset.js b/typeset.js index 8ee267c..49c3981 100644 --- a/typeset.js +++ b/typeset.js @@ -191,22 +191,23 @@ const MK = { ERR: 254, // (str) message // heartbeats, wakeup HELLO: 253, // (eom) - HELLORESPONSE: 252, // (eom) ? // request a top-level description //DESCRIBESELF: 251, // (eom) //BRIEF: 250, // (str) name of interpreter, # hunks, # links (and then begin firing list back) // please show what is available REQLISTAVAIL: 249, // (eom) LISTOFAVAIL: 248, // (list)(str) names 'dirs/like/this' (includes programs ?) (this might be multiple packets?) - // business ... we should be able to centralize all control w/i view.js if we can write these + // business ... we should be able to centralize all control w/i view.js if we can write these REQADDHUNK: 247, // (str) name HUNKALIVE: 246, // (hunkdescription): name, id, inputlist, outputlist, statelist - //REQRMHUNK: 245, // (str) id - //HUNKREMOVED: 244, // (str) id - //REQADDLINK: 243, // (str) id, (str) outname, (str) id, (str) inname - //LINKALIVE: 242, // (str) id, (str) outname, (str) id, (str) inname - //REQRMLINK: 241, // (str) id, (str) outname, (str) id, (str) inname - //LINKREMOVED: 240, // (str) id, (str) outname, (str) id, (str) inname + REQSTATECHANGE: 245, + HUNKSTATECHANGE: 244, + //REQRMHUNK: 243, // (str) id + //HUNKREMOVED: 242, // (str) id + //REQADDLINK: 241, // (str) id, (str) outname, (str) id, (str) inname + //LINKALIVE: 240, // (str) id, (str) outname, (str) id, (str) inname + //REQRMLINK: 239, // (str) id, (str) outname, (str) id, (str) inname + //LINKREMOVED: 238, // (str) id, (str) outname, (str) id, (str) inname } // hunk description keys, -- GitLab