diff --git a/README.md b/README.md
index b4051f768dd532e093082d050ea0fda12fcdf60a..07947c9e288e01d364fbae8ae72ac63e8c53b564 100644
--- a/README.md
+++ b/README.md
@@ -14,10 +14,16 @@ Native Cuttlefish 'Hunks' are given access to a DOM/div element, making them nic
# Scratch
+- on unwrapping a link,
+ - first wrap the link about the view green bar (moving the view bar, not unwrapping the view)
+ - then unwrap the view
+
+- then to nautilus, to look at unwrapping and matching on internal link
+
- rewrite small policies after refresh as .invert() call to .def ? or .insideout()
- native hunks add
-- views nest into links, exploded ...
+- views nest into links, exploded ...
- native hunks add, button add, to .deg ... and then move moves them all about ... or just cases for buttons and natives ...
diff --git a/hunks/view.js b/hunks/view.js
index 69ebfffa2fbffcaa5058f53efa375233d3fd34ef..472e632c407aed1878f72e8019d2490d9bdf4b22 100644
--- a/hunks/view.js
+++ b/hunks/view.js
@@ -97,6 +97,8 @@ function View() {
$(this.dom).find('.contextmenu').remove()
evt.preventDefault()
evt.stopPropagation()
+ // exit if we're not on target
+ if(!$(evt.target).is('.view')) return false
// make the menu,
let menu = $('<div>').addClass('contextmenu').get(0)
// (and there's compounding scale issues on dragging the canvas)
@@ -185,7 +187,7 @@ function View() {
}
})
})
- }
+ } // end onContextMenu
// takes 'under' argument
this.addContextOption = (text, click) => {
@@ -349,71 +351,45 @@ function View() {
let newDef = (spec) => {
// hmmm ok, we have checked that this is new, not an update,
if (verbose) console.log('ready write new spec to def', spec)
- // do we have this id already? could be an update;
let def = new HunkDefinition(spec, this, dt, false)
- // want this either way, and need to narrow our search for .ind by
- // only .ind in native scope
- // ok ok ok
- let native
- if (this.isTopLevel) {
- native = cuttlefishHunkRef.find((hunk) => {
- return hunk.ind === def.ind
- })
- }
- // this is also a check we do no matter,
- let mt = {}
+ defs.push(def)
+ // ok, we have the def, now we need to (1) place it and also (2)
+ // hook it up to any native dom elements (cuttlefish only)
+ // we'll find the menu, if it's about, this is a nice place to place
+ let mt
let menu = $(this.dom).children('.contextmenu').get(0)
if (menu !== undefined) {
mt = dt.readTransform(menu)
$(menu).remove()
}
- // truly, no explosions yet,
- if (def.type === 'view') {
- console.log('1st catch of a view')
- // and its dom element / hunk is special to us
- // this case is a pitas
- if (native !== undefined && native !== null) {
- def.hunk = native
- // at load, the view doesn't have a link, so is kind of homeless
- // that is likely arriving soon, but ...
- def.dropIn(this.plane)
- def.moveTo(200,400)
- // the actual 'def' will live beside
- defs.push(def)
- // oh .. eventually this will hook to a link, but for now ...
- if(def.name !== 'tlview'){
- def.takeNative(native)
- }
- } else {
- console.error('cannot find view dom or ref', def)
+ // let's place in plane,
+ def.dropIn(this.plane)
+ // manager in the top-left, thanks
+ if (def.ind === 0 && def.type === 'manager') { // TEMPORARY until better management with force layout
+ mt = {
+ s: 1,
+ x: 400,
+ y: 200
}
- } else {
- // not-views, std issue defs
- if (def.ind === 0 && def.type === 'manager') { // TEMPORARY until better management with force layout
- mt = {
- s: 1,
- x: 400,
- y: 200
- }
- } else if (def.ind === 1 && def.type === 'view') { // TEMPORARY until better management with force layout
- mt = {
- s: 1,
- x: 200,
- y: 200
- }
- } else if (mt) {
- //
- } else { // also, initial placement should be determined by force layout
- mt = {
- s: 1,
- x: Math.random() * 1000,
- y: Math.random() * 800
- }
+ } else if (!mt) {
+ // no menu, not manager, needs a home,
+ mt = {
+ s: 1,
+ x: Math.random() * 1000,
+ y: Math.random() * 800
}
- // if it's in the ref-to-add... secure a ptr to its tl software object
- // this is the same hunk reference that the manager manipulates
- if (native !== undefined && native !== null) {
- //console.log("trying to add native hunk's dom: native:", native)
+ }
+ // put it somewhere
+ def.moveTo(mt.x, mt.y)
+ this.drawLinks()
+ // now let's see if there is any 'native' content
+ // we can only do this in a top level view,
+ let native
+ if (this.isTopLevel) {
+ native = cuttlefishHunkRef.find((hunk) => {
+ return hunk.ind === def.ind
+ })
+ if (native && def.name !== 'tlview') {
try { // try to add the dom element to the def's domelement
// native is a handle on the hunk itself,
console.log('def', def)
@@ -425,15 +401,7 @@ function View() {
msgbox.write(`native hunk attach fails ${err}`)
}
}
- // add the def's domelement to the view,
- def.dropIn(this.plane)
- // ok, ready to place and append,
- def.moveTo(mt.x, mt.y)
- // and add it to our list
- defs.push(def)
}
-
- this.drawLinks()
// occasionally useful,
return def
} // FIN NEWDEF
@@ -747,7 +715,7 @@ function View() {
console.log("REFRESHING THE VIEW")
msgbox.clear()
msgbox.write('setting up to refresh the view')
- for(let def of defs){
+ for (let def of defs) {
def.remove()
}
// also,
@@ -786,8 +754,9 @@ function View() {
// 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'){
+ for (let def of defs) {
+ if (def.type === 'view') {
+ msgbox.write(`unwrapping one view ${def.name}`)
def.unwrap()
}
}
@@ -939,15 +908,11 @@ function View() {
console.log('drawing')
// hmmmm
viewDef.unwrap()
- // unhinge native def, hook to .degs
- // oy, what arr the rules here ?
- // (2) ... a view... is a view ... has different rules ...
- // we need a toplevel and a lower level, goddang
- // viewdef isn't the view,
- // thots: view is 1 hunk, has multiple inputs / outputs ... that we diddle
- // directly, similar to links having multiple IO
- // then we make some subset for drawing defs into ... some ~ bigboi architecture moves ~
- //viewDef.hunk.refresh()
+ // now it's blown up ...
+ // linkDef.wrapOn(viewDef.deg.native)
+ // and we'll want to handle resizes,
+ // and we'll also want:
+ // linkDef.isTopLink()
})
resolve(viewDef)
})
diff --git a/style.css b/style.css
index 4c9665fc58d681d378222e23366a0304c22de854..e689e5802b2d4993eae72e230d7a6508539d3a56 100644
--- a/style.css
+++ b/style.css
@@ -223,6 +223,20 @@ body {
padding: 3px;
}
+.nativewrap {
+ position: absolute;
+ width: 500px; /* many sets with js */
+ height: 500px;
+ color: #353a42;
+ background-color: #d5dfef;
+}
+
+.nativeheader {
+ background-color: green;
+ padding: 2px;
+ color: white;
+}
+
.uidiv {
width: 396px;
padding-top: 5px;
@@ -351,14 +365,6 @@ li:active{
/* USING THESE WITHIN BOYOS */
-.nativedom {
- position: absolute;
- width: 510px;
- color: #353a42;
- background-color: #d5dfef;
- margin-top: 10px;
-}
-
.btn {
padding: 10px;
font-size: 15px;
diff --git a/view/vdef.js b/view/vdef.js
index e3954ea5c3d722b6329b50f8a5827ac5742bbf2d..804eff7668dfd8002cd4cafdec8716e49569f154 100644
--- a/view/vdef.js
+++ b/view/vdef.js
@@ -240,14 +240,44 @@ function HunkDefinition(spec, view, dt, debug) {
}
// check natives
if (this.deg.native) {
- if (!ct) ct = dt.readTransform(this.deg.core)
- if (this.isExploded) console.error('not yet defined case for native collect on exploded def')
+ if (this.isExploded) return true
+ // put it beneath leftmost
+ ct = this.findStandardNativePosition()
dt.writeTransform(this.deg.native, {
- x: ct.x - 120,
- y: ct.y + this.deg.core.clientHeight + 5,
+ x: ct.x,
+ y: ct.y + 5,
s: 1
})
}
+ } // end checkCollection
+
+ // wow, lots to do here
+ this.findStandardNativePosition = () => {
+ if (this.isExploded) console.error('bad move finding native position for exploded def')
+ // find max height
+ let ht = this.deg.core.clientHeight
+ let ct
+ if (this.deg.inputs) {
+ ht = Math.max(ht, this.deg.inputs.clientHeight)
+ ct = dt.readTransform(this.deg.inputs)
+ } else {
+ ct = dt.readTransform(this.deg.core)
+ }
+ if (this.deg.outputs) {
+ ht = Math.max(ht, this.deg.inputs.clientHeight)
+ }
+ // ct.x from ct,
+ return {
+ x: ct.x,
+ y: ct.y + ht
+ }
+ }
+
+ this.findTotalWidth = () => {
+ if (this.isExploded) console.error('finding width for exploded is not defined yet')
+ let left = dt.readTransform(this.deg.inputs)
+ let right = dt.readTransform(this.deg.outputs)
+ return right.x + this.deg.outputs.clientWidth - left.x
}
this.remove = () => {
@@ -258,14 +288,16 @@ function HunkDefinition(spec, view, dt, debug) {
this.highlight = () => {
$(this.deg.core).find('.deftitle').css('background-color', '#969696')
- if (this.deg.inputs) $(this.deg.inputs).find('.inputheader').css('background-color', 'white')
- if (this.deg.outputs) $(this.deg.outputs).find('.outputheader').css('background-color', 'white')
+ if (this.deg.inputs) $(this.deg.inputs).find('.inputheader').css('background-color', 'white').css('color', 'black')
+ if (this.deg.outputs) $(this.deg.outputs).find('.outputheader').css('background-color', 'white').css('color', 'black')
+ if (this.deg.native) $(this.deg.native).find('.nativeheader').css('background-color', 'white').css('color', 'black')
}
this.unhighlight = () => {
$(this.deg.core).find('.deftitle').css('background-color', '#303030')
- if (this.deg.inputs) $(this.deg.inputs).find('.inputheader').css('background-color', 'red')
- if (this.deg.outputs) $(this.deg.outputs).find('.outputheader').css('background-color', 'blue')
+ if (this.deg.inputs) $(this.deg.inputs).find('.inputheader').css('background-color', 'red').css('color', 'white')
+ if (this.deg.outputs) $(this.deg.outputs).find('.outputheader').css('background-color', 'blue').css('color', 'white')
+ if (this.deg.native) $(this.deg.native).find('.nativeheader').css('background-color', 'green').css('color', 'white')
}
this.explode = () => {
@@ -281,71 +313,19 @@ function HunkDefinition(spec, view, dt, debug) {
this.unhighlight()
}
// and move about,
- if (this.deg.outputs) {
- this.deg.outputs.onmouseover = (evt) => {
- this.highlight()
- }
- this.deg.outputs.onmouseout = (evt) => {
- this.unhighlight()
- }
- this.deg.outputs.onmousedown = (evt) => {
- evt.preventDefault()
- evt.stopPropagation()
-
- let domElemMouseMove = (evt) => {
- // TRANSFORMS here to move div about on drag
- evt.preventDefault()
- evt.stopPropagation()
- let ct = dt.readTransform(this.deg.outputs)
- let pt = dt.readTransform(view.plane)
- ct.x += evt.movementX / pt.s
- ct.y += evt.movementY / pt.s
- dt.writeTransform(this.deg.outputs, ct)
- view.drawLinks()
- }
-
- function rmOnMouseUp(evt) {
- document.removeEventListener('mousemove', domElemMouseMove)
- document.removeEventListener('mouseup', rmOnMouseUp)
- }
+ if (this.deg.outputs) this.blowUp(this.deg.outputs)
+ if (this.deg.inputs) this.blowUp(this.deg.inputs)
+ if (this.deg.native) this.blowUp(this.deg.native)
+ }
- document.addEventListener('mousemove', domElemMouseMove)
- document.addEventListener('mouseup', rmOnMouseUp)
- }
+ this.blowUp = (elem) => {
+ elem.onmouseover = (evt) => {
+ this.highlight()
}
- // yikes 4 repeat code
- if (this.deg.inputs) {
- this.deg.inputs.onmouseover = (evt) => {
- this.highlight()
- }
- this.deg.inputs.onmouseout = (evt) => {
- this.unhighlight()
- }
- this.deg.inputs.onmousedown = (evt) => {
- evt.preventDefault()
- evt.stopPropagation()
-
- let domElemMouseMove = (evt) => {
- // TRANSFORMS here to move div about on drag
- evt.preventDefault()
- evt.stopPropagation()
- let ct = dt.readTransform(this.deg.inputs)
- let pt = dt.readTransform(view.plane)
- ct.x += evt.movementX / pt.s
- ct.y += evt.movementY / pt.s
- dt.writeTransform(this.deg.inputs, ct)
- view.drawLinks()
- }
-
- function rmOnMouseUp(evt) {
- document.removeEventListener('mousemove', domElemMouseMove)
- document.removeEventListener('mouseup', rmOnMouseUp)
- }
-
- document.addEventListener('mousemove', domElemMouseMove)
- document.addEventListener('mouseup', rmOnMouseUp)
- }
+ elem.onmouseout = (evt) => {
+ this.unhighlight()
}
+ dt.makeDraggable(elem)
}
this.unwrap = () => {
@@ -395,8 +375,13 @@ function HunkDefinition(spec, view, dt, debug) {
this.takeNative = (hunk) => {
this.hunk = hunk
- this.deg.native = $(hunk.dom).addClass('nativedom').get(0)
+ // wants a wrapper,
+ this.deg.native = $('<div>').addClass('nativewrap').get(0)
+ $(this.deg.native).append($(`<div>${this.name}'s html element</div>`).addClass('nativeheader'))
+ $(this.deg.native).append(this.hunk.dom)
$(view.plane).append(this.deg.native)
+ let wt = this.findTotalWidth()
+ $(this.deg.native).css('width', wt + 'px')
this.checkCollection()
}
diff --git a/view/vdom.js b/view/vdom.js
index edcd831db9c4d16d8e55fa4bc657a1e8c80b0590..3509e631883cd0639ce89b0c3d6fb93670d8e527 100644
--- a/view/vdom.js
+++ b/view/vdom.js
@@ -44,7 +44,10 @@ function DomTools(View) {
}
this.readContainerWidth = (div) => {
- return {x: div.clientWidth, y: div.clientHeight}
+ return {
+ x: div.clientWidth,
+ y: div.clientHeight
+ }
}
// these two are used in the floop, to build arrays of things to push around
@@ -63,6 +66,34 @@ function DomTools(View) {
height: div.clientHeight
}
}
+
+ // using this inside of defs, during explode, but not otherwise ..
+ this.makeDraggable = (elem) => {
+ elem.onmousedown = (evt) => {
+ evt.preventDefault()
+ evt.stopPropagation()
+
+ let domElemMouseMove = (evt) => {
+ // TRANSFORMS here to move div about on drag
+ evt.preventDefault()
+ evt.stopPropagation()
+ let ct = this.readTransform(elem)
+ let pt = this.readTransform(view.plane)
+ ct.x += evt.movementX / pt.s
+ ct.y += evt.movementY / pt.s
+ this.writeTransform(elem, ct)
+ view.drawLinks()
+ }
+
+ function rmOnMouseUp(evt) {
+ document.removeEventListener('mousemove', domElemMouseMove)
+ document.removeEventListener('mouseup', rmOnMouseUp)
+ }
+
+ document.addEventListener('mousemove', domElemMouseMove)
+ document.addEventListener('mouseup', rmOnMouseUp)
+ }
+ }
}
export default DomTools