Skip to content
Snippets Groups Projects
Commit c7bb8f20 authored by Jake Read's avatar Jake Read
Browse files

background zoom

parent 976b69c0
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
README.md
+ 4
− 1
View file @ c7bb8f20
......@@ -126,11 +126,14 @@ Then I should be able to write up a decent plan, and some next steps. And clean
Things I'm going to want to squish today:
- finishing 'view' is
- host jquery yourself
- div transforms / zoom / pan
- origin for zooms
- background transforms
- escape key
- paths betwixt events
First, I will try to re-factor all of my div-positioning with transforms ...
# Bug Foreshadowing
Here's a list of things that I suspect will eventually roll themselves into bugs with enough testing.
......
divtools.js
+ 29
− 9
View file @ c7bb8f20
......@@ -2,14 +2,27 @@
/* ------------------------- TRANSFORMS -------------------------- */
/* --------------------------- ---------------------------- */
function initTransformHandles(div) {
div.style.transform = 'scale(1) translate(0px, 0px)'
div.style.transformOrigin = '0px 0px'
function readCssMatrix(div){
// get it
let string = div.style.transform
//console.log("dt matrix arg", string)
let arr = string.split(',')
//console.log('arr', arr)
//console.log('a', (arr[0].substring(7)))
let matrix = {
a: parseFloat(arr[0].substring(7)),
b: parseFloat(arr[1]),
c: parseFloat(arr[2]),
d: parseFloat(arr[3]),
tx: parseFloat(arr[4]),
ty: parseFloat(arr[5])
}
return matrix
}
function cssMatrix(string){
// returns handy object for manipulating css matricies
console.log('dt string', string)
function writeCssMatrix(div, mt){
$(div).css('transform',
`matrix(${mt.a}, ${mt.b}, ${mt.c}, ${mt.d}, ${mt.tx}, ${mt.ty})`)
}
// s/o @ Neil
......@@ -86,11 +99,18 @@ function writeDefDom(def, parentdom, debug) {
//offsetY = evt.clientY - domElem.getBoundingClientRect().top
function domElemMouseMove(evt) {
// TRANSFORMS here to move div about on drag
evt.preventDefault()
evt.stopPropagation()
let mt = readCssMatrix(de)
mt.tx += evt.movementX
mt.ty += evt.movementY
writeCssMatrix(de, mt)
/*
var cT = getTransform(parentdom)
de.style.left = parseFloat(de.style.left) + evt.movementX / cT.s + 'px'
de.style.top = parseFloat(de.style.top) + evt.movementY / cT.s + 'px'
*/
// TODO rewrite redraw
//redrawLinks()
}
......@@ -235,8 +255,8 @@ function registerStateChangeRequest(parentid, state, value) {
}
export {
initTransformHandles,
cssMatrix,
readCssMatrix,
writeCssMatrix,
getTransform,
writeTransform,
writeDefDom
......
hunks/hidden/view.js
+ 83
− 50
View file @ c7bb8f20
......@@ -17,7 +17,13 @@ function View() {
this.inputs.msgs = new Input('message', 'msgs')
this.outputs.msgs = new Output('message', 'msgs')
// das UI globals
this.dom = {}
this.scale = 1
this.pan = {
x: 0,
y: 0
}
// * the interface * //
......@@ -45,45 +51,82 @@ function View() {
}
})
// get the context's menu
// get the context menu on righ click
this.dom.addEventListener('contextmenu', onContextMenu)
}
let mouseWheelListener = (evt) => {
evt.preventDefault()
evt.stopPropagation()
let children = $(this.dom).children()
let tf = $(children).css('transform')
let mt = DT.cssMatrix(tf)
console.log('tf', tf)
let ct = DT.getTransform(this.dom)
// decent event handles
let ox = evt.layerX
let oy = evt.layerY
// global case
let ds
let os = this.scale
if (evt.deltaY > 0) {
ct.s *= 1.05
this.scale *= 1.01
ds = 0.01
} else {
ct.s *= 0.95
}
let tx = ct.tx + (evt.pageX - ct.ox) * (1 - 1 / ct.s)
let ty = ct.ty + (evt.pageY - ct.oy) * (1 - 1 / ct.s)
this.scale *= 0.99
ds = -0.01
}
// ds is positive when scale is increasing, -ve when it is decreasing
//ds = this.scale - os
console.log('scale', this.scale)
console.log('ds', ds)
console.log('this pan', this.pan)
console.log('x diff', this.pan.x - ox)
let dx = (this.pan.x - ox) * ds
let dy = (this.pan.y - oy) * ds
console.log('dx', dx)
// global 'origin'
this.pan.x += dx
this.pan.y += dy
//this.pan.x = (this.pan.x - ox) * ds
//this.pan.y += (this.pan.y - oy) * (this.scale - 1)
// handle the background
this.dom.style.backgroundSize = `${this.scale*100}px ${this.scale*100}px`
this.dom.style.backgroundPosition = `${this.pan.x}px ${this.pan.y}px`
DT.writeTransform(this.dom, ct.s, [tx, ty], [evt.pageX, evt.pageY])
// TODO ok this will be reasonable, just do it in pixels, work out how to get those infos with js ?
// do something to do the div onload ?
// future-proofing is that the wrapper will change size as well
// but the best way to do that is to do the regression
// also consider many layers
// oh boy
/*
$(this.dom).children().each((index, div) => {
let mt = DT.readCssMatrix(div)
mt.a = this.scale
mt.d = this.scale
console.log('scale', this.scale)
console.log('ds', ds)
console.log('txterm', mt.tx)
console.log('oxterm', ox)
let distx = mt.tx - ox // is the distance from the origin to the left corner
// positive when the origin is to the left of the unit
// when scale is close to one, dx / dy should be close to zero
// when scale is below one (zoomed out), changes should be relatively
let dx = (mt.tx - ox) * (ds)
let dy = (mt.ty - oy) * (ds)
console.log('dx, dy', dx, dy)
mt.tx += dx
mt.ty += dy
DT.writeCssMatrix(div, mt)
})
*/
}
let mouseDragListener = (evt) => {
evt.preventDefault()
evt.stopPropagation()
var cT = DT.getTransform(this.dom)
var dx = evt.movementX
var dy = evt.movementY
var tx = cT.tx + dx / cT.s
var ty = cT.ty + dy / cT.s
DT.writeTransform(this.dom, cT.s, [tx, ty])
this.dom.style.padding = `${tx}px`
this.pan.x += evt.movementX
this.pan.y += evt.movementY
this.dom.style.backgroundPosition = `${this.pan.x}px ${this.pan.y}px`
$(this.dom).children().each((index, div) => {
let mt = DT.readCssMatrix(div)
mt.tx += evt.movementX
mt.ty += evt.movementY
DT.writeCssMatrix(div, mt)
})
}
let mouseUpListener = (evt) => {
......@@ -91,16 +134,17 @@ function View() {
window.removeEventListener('mouseup', mouseUpListener)
}
// menu improvements
// could use a unique id (relative this context's id) to always pick the right div, do actions depending on its state
// CONTEXT MENU
let onContextMenu = (evt) => {
console.log(evt)
evt.preventDefault()
evt.stopPropagation()
let ct = DT.getTransform(this.dom)
let menu = $('<div>').addClass('contextmenu').offset({ top: evt.layerY, left: evt.layerX }).append('<ul> hello -> </ul>').get(0)
// TRANSFORM here to write menu in the right spot on click
let menu = $('<div>').addClass('contextmenu')
.append('<ul> hello -> </ul>')
.css('transform', `matrix(${this.scale},0,0,${this.scale},${evt.layerX},${evt.layerY}`).get(0)
$(this.dom).append(menu)
DT.initTransformHandles(menu)
// an output
this.writemessage('hello', ' ')
}
......@@ -109,16 +153,6 @@ function View() {
$(this.dom).children('.contextmenu').append('<ul>' + text + '</ul>')
}
// TODO: HERE: NOW
/*
now I want to make that button, and then make something to read it
and then connect them
and first, I will un mouse-event-click the big container div
and then, I will make the zoom scroll work the way it is meant to
*/
let writeContextOptions = (list) => {
let menu = $(this.dom).children('.contextmenu').get(0)
for (let index in list) {
......@@ -135,22 +169,21 @@ function View() {
return item
}
// ADD A DEF
let addDef = (def) => {
console.log('ready write', def)
// get a position
// TODO if/ for case where no menu before load
let menu = $(this.dom).children('.contextmenu').get(0)
let pos = {
x: menu.style.left,
y: menu.style.top
}
// TRANSFORM for scale here, position to where-added ?
let mt = DT.readCssMatrix(menu)
let de = DT.writeDefDom(def, this.dom, false)
$(menu).remove()
de.style.left = pos.x
de.style.top = pos.y
if (def.dom !== null) {
console.log('a cuttlefish hunk appears')
$(de).append($(def.dom).addClass('cuttlefishhunkdom'))
}
DT.writeCssMatrix(de, mt)
$(menu).remove()
$(this.dom).append(de)
}
......
style.css
+ 4
− 4
View file @ c7bb8f20
......@@ -39,13 +39,13 @@ body {
.view {
height: 1000%;
width: 1000%;
background: #d6d6d6;
background: #000;
/*background-image:url("background.png");*/
/*background-origin: content-box;*/
background-image:
linear-gradient(rgba(255, 255, 255, .2) 2px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .2) 2px, transparent 1px);
background-size: 50px 50px;
linear-gradient(rgba(255, 255, 255, .2) 2px, transparent 2px),
linear-gradient(90deg, rgba(255, 255, 255, .2) 2px, transparent 2px);
background-size: 100px 100px;
}
.title {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment