From 81f53dd3f1fdff92e5c5109a829e81ce02b3e9cc Mon Sep 17 00:00:00 2001
From: Jake <jake.read@cba.mit.edu>
Date: Wed, 5 Jun 2019 12:24:22 -0400
Subject: [PATCH] wrapon
---
bootstrap.js | 4 ++-
hunks/view.js | 17 ++++++-------
view/vdef.js | 62 +++++++++++++++++++++++++++++++++++++++++-----
view/vdom.js | 8 +++---
view/vfloater.js | 64 +++++++++++++++++++++++++++++++++++-------------
5 files changed, 118 insertions(+), 37 deletions(-)
diff --git a/bootstrap.js b/bootstrap.js
index 830d4e3..09fb7bf 100644
--- a/bootstrap.js
+++ b/bootstrap.js
@@ -53,9 +53,11 @@ window.onload = () => {
// kick this later
setTimeout(() => {
View.refresh().then(() => {
+ // we know where this is,
+ View.defs[1].unwrap()
+ //
View.requestAddHunk('link').then((lDef) => {
View.expandLink(lDef)
- //
})
})
}, 150)
diff --git a/hunks/view.js b/hunks/view.js
index 0684a49..a5aea43 100644
--- a/hunks/view.js
+++ b/hunks/view.js
@@ -927,16 +927,16 @@ function View() {
// *also* we might not always have a route down, right?
this.requestAddHunk('view').then((viewDef) => {
// jquery moves automatically ?
- console.log('expanding the view', viewDef.name)
- console.log('via the link', linkDef.name)
+ console.log('expanding link: the view', viewDef.name)
+ console.log('expanding link: the link', linkDef.name)
// ok, and then .wrap()
// linkDef.setPlaneWidth(1200)
// hook it 2 ur veins
- console.log('adding one link...')
+ console.log('expanding link: adding one link...')
this.requestAddLink(linkDef.outputs[1], viewDef.inputs[0])
.then(() => {
// (1st) how does one genuinely chain promises ? we return the next one ?
- console.log('adding two link...')
+ console.log('expanding link: adding two link...')
return this.requestAddLink(viewDef.outputs[0], linkDef.inputs[1])
})
.then(() => {
@@ -947,12 +947,9 @@ function View() {
console.error('no collapse yet')
})
// hmmmm
- viewDef.unwrap()
- // now it's blown up ...
- // linkDef.wrapOn(viewDef.deg.native)
- // and we'll want to handle resizes,
- // and we'll also want:
- // linkDef.isTopLink()
+ let nt = viewDef.stealNative()
+ // now warp it 2
+ linkDef.wrapon(nt, viewDef)
})
resolve(viewDef)
})
diff --git a/view/vdef.js b/view/vdef.js
index aad47fd..221b028 100644
--- a/view/vdef.js
+++ b/view/vdef.js
@@ -208,7 +208,9 @@ function HunkDefinition(spec, view, dt, debug) {
cflt.take(this.deg.native, this, true)
}
cflt.take(this.deg.core, this)
- cflt.fitNativeToFloater()
+ if(this.deg.native) {
+ cflt.fitNativeToFloater()
+ }
this.floaters.push(cflt)
// if there are inputs, they are separate
if(this.deg.inputs){
@@ -220,9 +222,25 @@ function HunkDefinition(spec, view, dt, debug) {
view.floop.reset()
}
- this.wrapon = (floater) => {
- // upper-level link, wraps on a view
- console.error('not yet wrapping on')
+ // for links, accept a view domain element, add to ur floater, wrap that floater
+ this.wrapon = (de, viewDef) => {
+ if(this.type !== 'link') throw new Error('non-links doth not wrap')
+ // ok, and we want viewdef objects to highlight ...
+ // if we're not gathered to start, that's probably bad news
+ if(this.floaters.length > 1) console.error('wyd here? many floaters during a wrap', this.floaters)
+ // re-wrap the element,
+ this.deg.native = $('<div>').addClass('nativewrap').get(0)
+ // wrapper includes this title bar,
+ $(this.deg.native).append($(`<div>${this.name}'s html element</div>`).addClass('nativeheader').addClass('header'))
+ // and the hunk's element goes in that wrapper.
+ // awkward phrasing here, viewDef.hunk.dom === de as it stands
+ $(this.deg.native).append(de)
+ // but we'll pin it to another floater,
+ // ... continue
+ let flt = this.floaters[0]
+ // set as,
+ flt.grouptype = 'wrapped'
+ flt.take(this.deg.native, this)
}
this.edgecase = () => {
@@ -297,20 +315,52 @@ function HunkDefinition(spec, view, dt, debug) {
coreFloater.take(this.deg.native, this)
}
+ // add special case buttons, just this so far
if (this.type === 'link') {
// todo:
let expander = () => {
this.addButton('<i class="em em-octopus"></i>', (evt) => {
- // has to be a toplevel routine ...
+ // ???
view.expandLink(this).then((view) => {
//
})
})
}
-
expander()
}
+ this.stealNative = () => {
+ if(this.type !== 'view' || this.name === 'tlview') throw new Error('will not release non-view native')
+ // ? remove native dom element from a floater ?
+ // first, find the floater that contains it ...
+ let ntflt = this.floaters.find((cnd) => {
+ return cnd.typeset.includes('native')
+ })
+ if(ntflt){
+ // console.log('floater containing native', ntflt)
+ // splice the element out
+ let fltelem = ntflt.bag.findIndex((cnd) => {
+ return cnd.type === 'native'
+ })
+ if(fltelem !== -1){
+ // console.log('elem at', fltelem)
+ // we don't want the title, header, etc,
+ let pick = $(ntflt.bag[fltelem].de).children('.view').get(0)
+ // and we should cleanup
+ $(ntflt.bag[fltelem].de).remove()
+ // splice it out,
+ ntflt.bag.splice(fltelem, 1)
+ // this wants an update,
+ ntflt.onChange()
+ return pick
+ } else {
+ console.error('no native element found in floater ???')
+ }
+ } else {
+ console.error('no native floater found when trying to release')
+ }
+ }
+
if (debug) console.log('HunkDefinition', this)
} // end def-write
diff --git a/view/vdom.js b/view/vdom.js
index b545d15..9800bba 100644
--- a/view/vdom.js
+++ b/view/vdom.js
@@ -123,11 +123,13 @@ function DomTools(View) {
let domElemMouseMove = (evt) => {
evt.preventDefault()
evt.stopPropagation()
- let cw = (parseInt($(elem).css('width')) + evt.movementX / vt.s)
- let ch = (parseInt($(elem).css('height')) + evt.movementY / vt.s )
+ let dw = evt.movementX / vt.s
+ let dh = evt.movementY / vt.s
+ let cw = (parseInt($(elem).css('width')) + dw)
+ let ch = (parseInt($(elem).css('height')) + dh)
$(elem).css('width',`${cw}px`).css('height', `${ch}px`)
this.writeTransform(handle, {x: cw, y: ch})
- elem.onResizeCustomCallback(cw, ch)
+ elem.onResizeCustomCallback(dw, dh)
}
function rmOnMouseUp(evt) {
document.removeEventListener('mousemove', domElemMouseMove)
diff --git a/view/vfloater.js b/view/vfloater.js
index 3c4a484..15ab527 100644
--- a/view/vfloater.js
+++ b/view/vfloater.js
@@ -156,7 +156,7 @@ function Floater(view, grouptype) {
let nt = this.bag.find((cnd) => {
return cnd.type === 'native'
})
- if(!nt){
+ if (!nt) {
console.error('not finding a native element to resize here')
} else {
$(nt.de).css('width', `${this.w}px`)
@@ -165,12 +165,23 @@ function Floater(view, grouptype) {
let w = nt.de.clientWidth
let h = nt.de.clientHeight
let handle = $(nt.de).children('.resizehandle').get(0)
- dt.writeTransform(handle, {x: w, y: h})
+ dt.writeTransform(handle, {
+ x: w,
+ y: h
+ })
}
}
// to catch,
- this.onElementResize = (cw, ch) => {
+ this.onElementResize = (dw, dh) => {
+ // this is special
+ if (this.grouptype === 'wrapped') {
+ if (this.isFixed) {
+ this.fx += dw
+ } else {
+ this.x += dw
+ }
+ }
// this is a lot,
this.onChange()
}
@@ -210,18 +221,7 @@ function Floater(view, grouptype) {
let spaces = 5
// TYPE CASES BY TYPESET
- console.log('floater has', core ? '(core)' : '', inputs ? '(inputs)' : '', outputs ? '(outputs)' : '', native ? '(native)' : '')
- // cover buttons, if(buttons.length){
- if (buttons.length > 0) {
- if (!core) console.error('watch buttons not-on core?')
- let inc = 0
- for (let btn of buttons) {
- btn.offsetX = -core.de.clientWidth + inc
- btn.offsetY = -20
- inc += 20
- }
- }
- // ok,
+ //console.log('FLT onchange, floater has', core ? '(core)' : '', inputs ? '(inputs)' : '', outputs ? '(outputs)' : '', native ? '(native)' : '')
if (this.grouptype === 'std') {
// 'std' ... (core) with some set of (inputs) and (outputs) and (native)
@@ -276,10 +276,40 @@ function Floater(view, grouptype) {
inputs.offsetY = 0
}
}
+ } else if (this.grouptype === 'wrapped') {
+ // should have 'em all let's just wyld out
+ // the view attached is king,
+ let ntw = native.de.clientWidth
+ let nth = native.de.clientHeight
+ // left ...
+ native.offsetX = -ntw
+ native.offsetY = 0
+ // core
+ core.offsetX = -ntw
+ core.offsetY = -core.de.clientHeight - spaces
+ // inputs, well left
+ inputs.offsetX = -ntw - spaces - inputs.de.clientWidth
+ inputs.offsetY = 0
+ // ouputs, as is tradition
+ outputs.offsetX = spaces
+ inputs.offsetY = 0
} else {
- console.error('this floater grouptype not written or recognized', this.grouptype)
+ console.error(`this floater grouptype not written or recognized: '${this.grouptype}'`)
}
+ // now we can cover buttons, using core offsets
+ // cover buttons, if(buttons.length){
+ if (buttons.length > 0) {
+ if (!core) console.error('watch buttons not-on core?')
+ let inc = 0
+ for (let btn of buttons) {
+ btn.offsetX = core.offsetX + inc
+ btn.offsetY = -20 - core.offsetY
+ inc += 20
+ }
+ }
+ // ok,
+
// now we can execute this,
this.moveTo()
// oy oy oy
@@ -408,7 +438,7 @@ function Floater(view, grouptype) {
let native = this.bag.find((cnd) => {
return cnd.type === 'native'
})
- if(native){
+ if (native) {
$(native.de).children('.resizehandle').remove()
}
}
--
GitLab