From 82ac5f05f06a380577cb7dcd63ebec25b018f5b0 Mon Sep 17 00:00:00 2001
From: Jake Read <jake.read@cba.mit.edu>
Date: Tue, 10 Dec 2019 22:18:42 -0500
Subject: [PATCH] crude resize
---
core/scope.js | 157 ++++++++++++++++++++++++++---------------------
style.css | 9 ++-
view/blocks.js | 11 ++++
view/domtools.js | 77 ++++++-----------------
4 files changed, 123 insertions(+), 131 deletions(-)
diff --git a/core/scope.js b/core/scope.js
index 0dff360..71f63ee 100644
--- a/core/scope.js
+++ b/core/scope.js
@@ -43,7 +43,7 @@ export default function Scope(wrapper, tlv) {
wrapper.addEventListener('contextmenu', (evt) => {
evt.preventDefault()
evt.stopPropagation()
- if ($(evt.target).is('.defcore')){
+ if ($(evt.target).is('.defcore')) {
cm.defMenu(evt)
} else {
cm.planeMenu(evt, tlv)
@@ -90,20 +90,20 @@ export default function Scope(wrapper, tlv) {
// should follow
let block = evt.target
dt.dragTool((evt) => { // this just wraps up a global drag event, fires that on move, releases and deletes it on mouseup
- if(!block.handle){
+ if (!block.handle) {
console.error('was expecting this title to have a handle to ah def')
// therefor is-not-subject to drag, therefor wyd, m8 ?
return
}
- block.handle.position.x += evt.movementX * (1/cs)
- block.handle.position.y += evt.movementY * (1/cs)
+ block.handle.position.x += evt.movementX * (1 / cs)
+ block.handle.position.y += evt.movementY * (1 / cs)
blocks.repositionBlock(block)
})
} else if ($(evt.target).is('.output')) {
evt.preventDefault()
evt.stopPropagation()
let opblock = evt.target
- if(!opblock.handle) {
+ if (!opblock.handle) {
// handles should be routed at this point
console.error('bad / no handle for this .output, wyd? - exiting')
return
@@ -118,17 +118,17 @@ export default function Scope(wrapper, tlv) {
// i.e. they are first order memebers with absolute positioning, we can
// draw links w/ no extra hassle, just pulling their positions str8 from the dom...
dt.dragTool((drag) => {
- position.x += drag.movementX * (1 / cs)
+ position.x += drag.movementX * (1 / cs)
position.y += drag.movementY * (1 / cs)
dt.writeTransform(floater, position)
dt.drawWire(opblock, floater)
}, (up) => {
// anything with a .handle is some object in our tree
- if(up.target.handle){
- if(up.target.handle.is === "input"){
+ if (up.target.handle) {
+ if (up.target.handle.is === "input") {
let cnOp = opblock.handle
let cnIp = up.target.handle
- if(cnOp.parent.context === cnIp.parent.context){
+ if (cnOp.parent.context === cnIp.parent.context) {
// could do here: throw up status of request,
// clear when complete, or set err state when it doesn't work
cnOp.parent.context.requestAddLink(cnOp, cnIp).then(() => {
@@ -147,18 +147,33 @@ export default function Scope(wrapper, tlv) {
dt.rmWire(opblock, floater)
$(floater).remove()
})
- } else if ($(evt.target).is('#wrapper')){
+ } else if ($(evt.target).is('#wrapper')) {
evt.preventDefault()
evt.stopPropagation()
- dt.dragTool((evt) => {
- evt.preventDefault()
- evt.stopPropagation()
+ dt.dragTool((drag) => {
+ drag.preventDefault()
+ drag.stopPropagation()
let ct = dt.readTransform(plane)
- ct.x += evt.movementX
- ct.y += evt.movementY
+ ct.x += drag.movementX
+ ct.y += drag.movementY
dt.writeTransform(plane, ct)
dt.writeBackgroundTransform(wrapper, ct)
})
+ } else if ($(evt.target).is('.resizehandle')) {
+ evt.preventDefault()
+ evt.stopPropagation()
+ dt.dragTool((drag) => {
+ evt.preventDefault()
+ evt.stopPropagation()
+ evt.target.handle.onresize({
+ x: drag.movementX * (1 / cs),
+ y: drag.movementY * (1 / cs),
+ })
+ dt.writeTransform(evt.target, {
+ x: evt.target.handle.clientWidth - evt.target.clientWidth / 2,
+ y: evt.target.handle.clientHeight - evt.target.clientHeight / 2
+ })
+ })
} else {
return
}
@@ -209,76 +224,76 @@ export default function Scope(wrapper, tlv) {
// wherein setting something in the view with (setUpdate) or whatever bubbles up the tree
let checkView = (view) => {
- // first off, if we wipe the whole thing,
- // we don't have to handle anything else
- if(view.hasCompleteRedraw){
- console.log("SCOPE run for complete redraw")
- console.time('redraw-complete')
- blocks.wipeContext(view)
- for(let i = 0; i < view.defs.length; i ++){
- blocks.redrawDef(view.defs[i])
- view.defs[i].hasUpdate = false
- }
- blocks.redrawContexWires(view)
- view.hasConnectivityChange = false
- view.hasDefUpdate = false
- view.hasCompleteRedraw = false
- console.timeEnd('redraw-complete')
- return
+ // first off, if we wipe the whole thing,
+ // we don't have to handle anything else
+ if (view.hasCompleteRedraw) {
+ console.log("SCOPE run for complete redraw")
+ console.time('redraw-complete')
+ blocks.wipeContext(view)
+ for (let i = 0; i < view.defs.length; i++) {
+ blocks.redrawDef(view.defs[i])
+ view.defs[i].hasUpdate = false
}
+ blocks.redrawContexWires(view)
+ view.hasConnectivityChange = false
+ view.hasDefUpdate = false
+ view.hasCompleteRedraw = false
+ console.timeEnd('redraw-complete')
+ return
+ }
- // otherwise, we should first handle def updates
- // (this also counts new definitions)
- // eventually will do / switch this per ll item
- // defs w/ updates are for: state items, name changes,
- // and probably connection / rewires (add / sub inputs)
- if (view.hasDefUpdate) {
- console.log('SCOPE run for hasDefUpdate')
- console.time('redraw-defupdate')
- for (let i = 0; i < view.defs.length; i++) {
- if (view.defs[i].hasUpdate) {
- // for now, we just redraw the entire definition, whenever we have updates for it
- blocks.redrawDef(view.defs[i])
- // ah yeah, so we also occasionally load defs in here w/o having their link-drawing
- // so we should just draw links from outputs as well as from inputs, then
- // want a clean way to do that next...
- view.defs[i].hasUpdate = false
- }
+ // otherwise, we should first handle def updates
+ // (this also counts new definitions)
+ // eventually will do / switch this per ll item
+ // defs w/ updates are for: state items, name changes,
+ // and probably connection / rewires (add / sub inputs)
+ if (view.hasDefUpdate) {
+ console.log('SCOPE run for hasDefUpdate')
+ console.time('redraw-defupdate')
+ for (let i = 0; i < view.defs.length; i++) {
+ if (view.defs[i].hasUpdate) {
+ // for now, we just redraw the entire definition, whenever we have updates for it
+ blocks.redrawDef(view.defs[i])
+ // ah yeah, so we also occasionally load defs in here w/o having their link-drawing
+ // so we should just draw links from outputs as well as from inputs, then
+ // want a clean way to do that next...
+ view.defs[i].hasUpdate = false
}
- view.hasDefUpdate = false
- console.timeEnd('redraw-defupdate')
}
+ view.hasDefUpdate = false
+ console.timeEnd('redraw-defupdate')
+ }
- // also, we do this globally. tough. scrape and move on
- if(view.hasConnectivityChange){
- console.log('SCOPE run for connectivity change')
- console.time('redraw-connectivity')
- blocks.redrawContexWires(view)
- view.hasConnectivityChange = false
- console.timeEnd('redraw-connectivity')
- }
+ // also, we do this globally. tough. scrape and move on
+ if (view.hasConnectivityChange) {
+ console.log('SCOPE run for connectivity change')
+ console.time('redraw-connectivity')
+ blocks.redrawContexWires(view)
+ view.hasConnectivityChange = false
+ console.timeEnd('redraw-connectivity')
+ }
- if(view.hasDefPositionUpdate){
- console.log('SCOPE run for reposition from view')
- console.time('redraw-position')
- for(let i = 0; i < view.defs.length; i ++){
- if(view.defs[i].hasPositionUpdate){
- blocks.repositionDef(view.defs[i])
- view.defs[i].hasPositionUpdate = false
- }
+ if (view.hasDefPositionUpdate) {
+ console.log('SCOPE run for reposition from view')
+ console.time('redraw-position')
+ for (let i = 0; i < view.defs.length; i++) {
+ if (view.defs[i].hasPositionUpdate) {
+ blocks.repositionDef(view.defs[i])
+ view.defs[i].hasPositionUpdate = false
}
- view.hasDefPositionUpdate = false
- console.timeEnd('redraw-position')
}
+ view.hasDefPositionUpdate = false
+ console.timeEnd('redraw-position')
+ }
}
this.check = () => {
// check levels recursively,
let recursor = (view) => {
checkView(view)
- for(let def of view.defs){
- if(def.contains){
- if(!def.contains.plane) continue
+ for (let def of view.defs) {
+ if (def.contains) {
+ if (!def.contains.plane) continue
recursor(def.contains)
}
}
diff --git a/style.css b/style.css
index c634c9a..994c16a 100644
--- a/style.css
+++ b/style.css
@@ -72,11 +72,18 @@ body {
.subplane{
position: absolute;
- background-color: #c1c1c1;;
+ background-color: #c1c1c1;
width: 1200px;
height: 800px;
}
+.resizehandle{
+ position:absolute;
+ background-color: blue;
+ width: 50px;
+ height: 50px;
+}
+
#programMenu {
position: absolute;
width: 245px;
diff --git a/view/blocks.js b/view/blocks.js
index 38004c5..ef62937 100644
--- a/view/blocks.js
+++ b/view/blocks.js
@@ -88,6 +88,17 @@ let makeLink = (ldef, titleblock) => {
ldef.blocks.push(ldef.contains.plane)
titleblock.take(ldef.contains.plane)
$(window.tlv.plane).append(ldef.contains.plane)
+ dt.addResizeHandle(ldef.contains.plane)
+ ldef.contains.plane.onresize = (deltas) => {
+ let size = dt.readContainerSize(ldef.contains.plane)
+ size.x += deltas.x
+ size.y += deltas.y
+ dt.writeContainerSize(ldef.contains.plane, size)
+ repositionDef(ldef)
+ if(ldef.downstream){
+ repositionDef(ldef.downstream)
+ }
+ }
// and,
repositionDef(ldef)
// toggle button state,
diff --git a/view/domtools.js b/view/domtools.js
index fd9f476..3966bdb 100644
--- a/view/domtools.js
+++ b/view/domtools.js
@@ -54,13 +54,18 @@ let readTransform = (div) => {
})
}
-let readContainerWidth = (div) => {
+let readContainerSize = (div) => {
return {
x: div.clientWidth,
y: div.clientHeight
}
}
+let writeContainerSize = (div, size) => {
+ div.style.width = size.x + 'px'
+ div.style.height = size.y + 'px'
+}
+
// these two are used in the floop, to build arrays of things to push around
let readXY = (div) => {
return {
@@ -69,14 +74,6 @@ let readXY = (div) => {
}
}
-// and to determine how large to make the circle for pushing against
-let readSize = (div) => {
- return {
- width: div.clientWidth,
- height: div.clientHeight
- }
-}
-
let dragTool = (dragHandler, upHandler) => {
let onUp = (evt) => {
if (upHandler) upHandler(evt)
@@ -224,63 +221,25 @@ let rmAllWires = (block) => {
}
// also only using this for the view atm,
-let makeResizeable = (elem, callback, notify) => {
- console.error('have blanked this code, pls revisit')
- /*
- // yikes, messy dom
- elem.onResizeCustomCallback = callback
- // more band aid
- if(notify) elem.onResizeCustomNotify = notify
- // first we put a handle in the bottom,
- let handle = $(`<div>`).append('<i class="em em-arrow_lower_right"></i>').addClass('resizehandle').get(0)
- $(elem).append(handle)
- // track, can we go outside?
- let w = elem.clientWidth
- let h = elem.clientHeight
- this.writeTransform(handle, {x: w, y: h})
- // make
- elem.requestResize = (x, y) => {
- //console.log('request resize', x, y, 'on', elem)
- $(elem).css('width',`${x}px`).css('height', `${y}px`)
- this.writeTransform(handle, {x: x, y: y})
- elem.onResizeCustomCallback()
- if(elem.onResizeCustomNotify) elem.onResizeCustomNotify()
- }
- // ++ or --
- handle.onmousedown = (evt) => {
- evt.preventDefault()
- evt.stopPropagation()
- // doing this once, so not covered for scroll-while-drag, but ...
- let vt = this.readTransform(view.plane)
- // on move,
- let domElemMouseMove = (evt) => {
- evt.preventDefault()
- evt.stopPropagation()
- 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.requestResize(cw, ch)
- }
- function rmOnMouseUp(evt) {
- document.removeEventListener('mousemove', domElemMouseMove)
- document.removeEventListener('mouseup', rmOnMouseUp)
- }
- document.addEventListener('mousemove', domElemMouseMove)
- document.addEventListener('mouseup', rmOnMouseUp)
- }
- */
+let addResizeHandle = (elem, callback) => {
+ let grab = $(`<div>`).addClass('resizehandle').get(0)
+ grab.handle = elem
+ $(elem).append(grab)
+ writeTransform(grab, {
+ x: elem.clientWidth - grab.clientWidth / 2,
+ y: elem.clientHeight - grab.clientHeight / 2
+ })
}
export default {
writeTransform,
writeBackgroundTransform,
readTransform,
- readContainerWidth,
- readXY,
- readSize,
+ readContainerSize,
+ writeContainerSize,
dragTool,
drawWire,
rmWire,
- rmAllWires
+ rmAllWires,
+ addResizeHandle
}
--
GitLab