From f56040e75ddcac9be81fde79f56a90250036a2a0 Mon Sep 17 00:00:00 2001
From: Jake <jake.read@cba.mit.edu>
Date: Thu, 30 May 2019 16:03:51 -0400
Subject: [PATCH] inside out, and discover mystery term for odd offsets
---
hunks/view.js | 51 +++++++++++++++++++++++++++++++++++++++++++++------
style.css | 8 ++++++++
view/vbzt.js | 2 +-
view/vdef.js | 11 +++++++++++
view/vdom.js | 6 +++++-
5 files changed, 70 insertions(+), 8 deletions(-)
diff --git a/hunks/view.js b/hunks/view.js
index 4ed29af..c1f10de 100644
--- a/hunks/view.js
+++ b/hunks/view.js
@@ -208,6 +208,8 @@ function View() {
this.drawLinks = () => {
// drawing from scratch every time ! could be faster, probably
bzt.clear(this.plane)
+ // 1st,
+ this.followRules()
// draw 'em all
for (let def of defs) {
for (let output of def.outputs) {
@@ -223,6 +225,30 @@ function View() {
}
}
+ this.followRules = () => {
+ // follow rules ?
+ /*
+ - find view defs ... orient to edges,
+ */
+ if (this.isTopLevel) {
+ let ct = dt.readTransform(this.plane)
+ let wt = dt.readContainerWidth(this.dom)
+ let vcnt = 0
+ for (let def of defs) {
+ if (def.type === 'view') {
+ // looks like this is the magic / mystery term: 100*(1-ct.s)
+ def.setPlaneWidth((wt.x - 100*(1-ct.s)) / ct.s)
+ dt.writeTransform(def.de, {
+ s: 1,
+ x: -ct.x / ct.s,
+ y: (-ct.y + vcnt * 75 * ct.s) / ct.s
+ })
+ vcnt ++
+ }
+ }
+ }
+ }
+
/* --------------------------- ---------------------------- */
/* -------------------- DEFS in the DOM ---------------------- */
/* --------------------------- ---------------------------- */
@@ -346,7 +372,11 @@ function View() {
// at load, the view doesn't have a link, so is kind of homeless
// that is likely arriving soon, but ...
$(this.plane).append(def.de)
- dt.writeTransform(def.de, {s: 1, x: 500, y: 500})
+ dt.writeTransform(def.de, {
+ s: 1,
+ x: 500,
+ y: 500
+ })
defs.push(def)
} else {
console.error('cannot find view dom or ref', def)
@@ -771,8 +801,6 @@ function View() {
land.append(this.dom)
$(this.dom).attr('id', 'NROLVIEW')
- // ll views don't transform dom ...
-
// init transform of the plane,
let dft = {
s: 1,
@@ -809,9 +837,12 @@ function View() {
ct.x += (ct.x - ox) * ds
ct.y += (ct.y - oy) * ds
- dt.writeTransform(this.plane, ct)
- dt.writeBackgroundTransform(this.dom, ct)
- // now redraw links
+ if (ct.s < 1) {
+ dt.writeTransform(this.plane, ct)
+ dt.writeBackgroundTransform(this.dom, ct)
+ }
+
+ this.drawLinks()
})
let canvasDragListener = (evt) => {
@@ -822,6 +853,7 @@ function View() {
ct.y += evt.movementY
dt.writeTransform(this.plane, ct)
dt.writeBackgroundTransform(this.dom, ct)
+ this.drawLinks()
}
let canvasUpListener = (evt) => {
@@ -862,6 +894,13 @@ function View() {
})
}
+ window.onresize = () => {
+ console.log('resize')
+ this.drawLinks()
+ }
+
+ /* QUEEN RECEPIES */
+
this.expandLink = (linkDef) => {
return new Promise((resolve, reject) => {
// i.e. requestAddHunk isn't necessarily hooked to this
diff --git a/style.css b/style.css
index efe1d8a..0581558 100644
--- a/style.css
+++ b/style.css
@@ -169,6 +169,10 @@ body {
color: #eee;
}
+.inputs.insideout {
+ float: right;
+}
+
.input:hover {
cursor: pointer;
}
@@ -183,6 +187,10 @@ body {
color: #eee;
}
+.outputs.insideout {
+ float: left;
+}
+
.output:hover {
cursor: grab;
}
diff --git a/view/vbzt.js b/view/vbzt.js
index 6167430..1865e9a 100644
--- a/view/vbzt.js
+++ b/view/vbzt.js
@@ -18,7 +18,7 @@ function BezierTools(View) {
}
this.getLeftHandle = (div) => {
- let x = div.offsetParent.offsetLeft
+ let x = div.offsetParent.offsetLeft + (div. offsetLeft)
let y = div.offsetParent.offsetTop + (div.offsetTop + div.clientHeight / 2)
return {
x: x,
diff --git a/view/vdef.js b/view/vdef.js
index ae1766d..6402e80 100644
--- a/view/vdef.js
+++ b/view/vdef.js
@@ -164,6 +164,17 @@ function HunkDefinition(spec, view, dt, debug) {
// inside-out defs,
this.makeInsideOut = () => {
console.error('make inside out')
+ console.log(this)
+ console.log(this.de)
+ // can we do ...
+ $(this.de).find('.inputs').addClass('insideout')
+ $(this.de).find('.outputs').addClass('insideout')
+
+ }
+
+ // set width,
+ this.setPlaneWidth = (num) => {
+ this.de.style.width = num + 'px'
}
if (this.type == 'link') {
diff --git a/view/vdom.js b/view/vdom.js
index 58d0800..d375a15 100644
--- a/view/vdom.js
+++ b/view/vdom.js
@@ -19,7 +19,7 @@ function DomTools(View) {
// as a note: something is wrongo with this, background doth not zoom at the same rate...
this.writeBackgroundTransform = (div, tf) => {
div.style.backgroundSize = `${tf.s * 100}px ${tf.s * 100}px`
- div.style.backgroundPosition = `${tf.x}px ${tf.y}px `
+ div.style.backgroundPosition = `${tf.x + 50*(1-tf.s)}px ${tf.y + 50*(1-tf.s)}px`
}
// a uility to read those transforms out of elements,
@@ -42,6 +42,10 @@ function DomTools(View) {
})
}
+ this.readContainerWidth = (div) => {
+ return {x: div.clientWidth, y: div.clientHeight}
+ }
+
// these two are used in the floop, to build arrays of things to push around
this.readXY = (div) => {
//console.log('READXY left', div.style.left, 'top', div.style.top)
--
GitLab