diff --git a/README.md b/README.md
index 20b0662c832acbffaae3613ea05026118e07fd4b..9d8ebd272b06bd469a75c7f4a12110d61b4935ee 100644
--- a/README.md
+++ b/README.md
@@ -14,13 +14,12 @@ Native Cuttlefish 'Hunks' are given access to a DOM/div element, making them nic
# Scratch
-- .invert
+- rewrite small policies after refresh as .invert() call to .def ? or .insideout()
-- policies, recepies etc
- - apres refresh, run expansions
- - def.invert (1) explodes and then (2) wraps inside, outside, to left-of and right-of farthest-right connections ...
+- native hunks add, button add, to .deg ... and then move moves them all about ... or just cases for buttons and natives ...
+
+- views get a 'green' header like inputs / outputs ... and we do .wrap(view.hunk.dom) on these
-- add / delete / rename to title again (above)
- link expansion button, a button
- side panel exists on another plane / can collapse /
diff --git a/hunks/view.js b/hunks/view.js
index e0653fc74fa5fb6af69d60c9f98232111a688345..2266bf669ba3078f591753d0ffb251192192ea23 100644
--- a/hunks/view.js
+++ b/hunks/view.js
@@ -453,7 +453,7 @@ function View() {
let replaceDef = (spec) => {
let od = defs[spec.ind]
// as a rule, when we replace defs, we unhook everything.
- // the manager (in its wisdom) is responsible for following up by sending us
+ // the manager is responsible for following up by sending us
// links that are still alive,
// console.log('the od', od)
// so first rm those links (this won't properly be tested until program loading, i'd bet)
@@ -776,35 +776,16 @@ function View() {
}
}
}
- this.drawLinks()
// we are done adding things, have all defs in the dom
// now we can run policies, layout etc
// here, catching links and views
for(let def of defs){
if(def.type === 'view'){
- def.explode()
- // now let's see where the view is connected ..
- let cni = def.inputs[0].connections[0]
- if(cni){
- let pc = dt.readTransform(cni.de.parentNode)
- def.moveTo(pc.x + 200, pc.y - 20, 1, 'inputs')
- } else {
- console.error('refresh, view, no connection, odd')
- }
- // and outputs,
- let cno = def.outputs[0].connections[0]
- if(cno){
- let pc = dt.readTransform(cno.de.parentNode)
- def.moveTo(pc.x - 200, pc.y - 20, 1, 'outputs')
- // and the core, set above the outputs ..
- def.moveTo(pc.x - 200, pc.y - 100, 1)
- } else {
- console.error('refresh, view, no connection, odd')
- }
- // finally,
- this.drawLinks()
+ def.unwrap()
}
}
+ // finally
+ this.drawLinks()
msgbox.write(`~ view refresh complete ~`)
}
}).catch((err) => {
@@ -938,6 +919,7 @@ function View() {
let viewDe = $(viewDef.de).find('.sleeper').get(0)
$(linkDef.de).append(viewDe)
$(viewDe).removeClass('sleeper')
+ // ok, and then .wrap()
linkDef.setPlaneWidth(1200)
// hook it 2 ur veins
console.log('adding one link...')
@@ -959,6 +941,8 @@ function View() {
})
resolve(viewDef)
})
+ }).catch((err) => {
+ console.log('err during link expansion', err)
})
}
diff --git a/style.css b/style.css
index fb50828c57165c1b14228b63f8bdf4f3e6a982cf..94caca1397eb675272c50c2b4168a4d3acecd818 100644
--- a/style.css
+++ b/style.css
@@ -133,7 +133,7 @@ body {
/* is title and state */
.defcore {
- width: 300px;
+ width: 275px;
overflow: hidden;
position: absolute;
padding: 0px;
@@ -161,6 +161,23 @@ body {
cursor: grabbing;
}
+.defbuttons {
+ position: absolute;
+ height: 30px;
+}
+
+.defbutton {
+ padding: 5px;
+ width: 35px;
+ color: white;
+ background-color: green;
+}
+
+.defbutton:hover{
+ cursor: pointer;
+ background-color: teal;
+}
+
.inputs {
position:absolute;
width: 117px;
diff --git a/view/vdef.js b/view/vdef.js
index a8ec0a62aaee9c0124ba87edd0b50b0cf3c43203..f8edadc23d4d6327c15a0b416b3676f1fc8454ec 100644
--- a/view/vdef.js
+++ b/view/vdef.js
@@ -193,17 +193,25 @@ function HunkDefinition(spec, view, dt, debug) {
s: scale
})
}
- if (Object.keys(this.deg).length > 3) console.error('unaccounted for deg objects at moveTo')
+ // if (Object.keys(this.deg).length > 3) console.error('unaccounted for deg objects at moveTo')
} else {
if (item === 'outputs') {
if (this.deg.outputs) {
- dt.writeTransform(this.deg.outputs, {x: x, y: y, s: 1})
+ dt.writeTransform(this.deg.outputs, {
+ x: x,
+ y: y,
+ s: 1
+ })
} else {
console.error('no outputs at move to')
}
- } else if (item === 'inputs'){
+ } else if (item === 'inputs') {
if (this.deg.inputs) {
- dt.writeTransform(this.deg.inputs, {x: x, y: y, s: 1})
+ dt.writeTransform(this.deg.inputs, {
+ x: x,
+ y: y,
+ s: 1
+ })
} else {
console.error('no inputs at move to')
}
@@ -215,6 +223,19 @@ function HunkDefinition(spec, view, dt, debug) {
})
}
}
+ this.checkCollection()
+ }
+
+ // look for and collect any stray divs that are hooked 2 our .deg
+ this.checkCollection = () => {
+ if (this.deg.buttons) {
+ let ct = dt.readTransform(this.deg.core)
+ dt.writeTransform(this.deg.buttons, {
+ x: ct.x + this.deg.core.clientWidth - this.deg.buttons.clientWidth,
+ y: ct.y - this.deg.buttons.clientHeight - 10,
+ s: 1
+ })
+ }
}
this.remove = () => {
@@ -236,6 +257,8 @@ function HunkDefinition(spec, view, dt, debug) {
}
this.explode = () => {
+ if (this.isExploded) return true
+ // or
this.isExploded = true
// add listeners for io
// coherent hover
@@ -313,24 +336,57 @@ function HunkDefinition(spec, view, dt, debug) {
}
}
- /* --------------------------- ---------------------------- */
- /* --------------------- SOME ARE UNIQUE --------------------- */
- /* --------------------------- ---------------------------- */
-
+ this.unwrap = () => {
+ this.explode()
+ // now let's see where the view is connected ..
+ let cni = this.inputs[0].connections[0]
+ if (cni) {
+ let pc = dt.readTransform(cni.de.parentNode)
+ this.moveTo(pc.x + 200, pc.y - 20, 1, 'inputs')
+ } else {
+ console.error('refresh, view, no connection, odd')
+ }
+ // and outputs,
+ let cno = this.outputs[0].connections[0]
+ if (cno) {
+ let pc = dt.readTransform(cno.de.parentNode)
+ this.moveTo(pc.x - 200, pc.y - 20, 1, 'outputs')
+ // and the core, set above the outputs ..
+ this.moveTo(pc.x - 200, pc.y - 100, 1)
+ } else {
+ console.error('refresh, view, no connection, odd')
+ }
+ }
- this.addResizers = () => {
+ // adden em
+ this.addButton = (text, callback) => {
+ let element = $(`<div>${text}</div>`).addClass('defbutton').get(0)
+ $(element).on('click', callback)
+ if (this.deg.buttons) {
+ $(this.deg.buttons).append(element)
+ } else {
+ this.deg.buttons = $('<div>').addClass('defbuttons').get(0)
+ $(view.plane).append(this.deg.buttons)
+ $(this.deg.buttons).append(element)
+ }
+ this.checkCollection()
+ }
+ this.removeButton = (text) => {
+ // find by contents, rm,
}
+ /* --------------------------- ---------------------------- */
+ /* --------------------- SOME ARE UNIQUE --------------------- */
+ /* --------------------------- ---------------------------- */
+
// set width,
this.setPlaneWidth = (num) => {
this.de.style.width = num + 'px'
}
- if (this.type == 'link') {
- console.log('a link')
- let open = $('<li style="text-align: center;">~ expand view ~</li>').get(0)
- $(open).on('click', (evt) => {
+ if (this.type === 'link') {
+ this.addButton('expand view', (evt) => {
view.expandLink(this).then((view) => {
$(open).text('~ collapse view ~')
$(open).off('click')
@@ -340,7 +396,6 @@ function HunkDefinition(spec, view, dt, debug) {
})
})
})
- $(this.de).prepend(open)
}
if (debug) console.log('HunkDefinition', this)