Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update zoom-wheel.html #752

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update zoom-wheel.html #752

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 165 additions & 42 deletions demos/zoom-wheel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,77 +46,200 @@
let over = u.over;
let rect = over.getBoundingClientRect();

// wheel drag pan
over.addEventListener("mousedown", e => {
if (e.button == 1) {
// plot.style.cursor = "move";
e.preventDefault();
// all axes add event
for(let key in u.axes){
let axis = u.axes[key]._el;

let a_rect = axis.getBoundingClientRect();

axis._params = [key, a_rect];

axis.addEventListener("mousedown", e => {
// wheel drag pan
if (e.button == 1) {
e.preventDefault();

let key = e.target._params[0];
// sacle ID
let scale_key = u.axes[key].scale;

let scale = u.scales[scale_key]
let umin = scale.min;
let umax = scale.max;

let scale_scale = u.posToVal(0, scale_key) - u.posToVal(1, scale_key);

let left0 = e.clientX;
let top0 = e.clientY;

let left0 = e.clientX;
// let top0 = e.clientY;
function onmove(e) {
e.preventDefault();

let scXMin0 = u.scales.x.min;
let scXMax0 = u.scales.x.max;
let left1 = e.clientX;
let top1 = e.clientY;
let dt = 0;
if(scale.ori === 0){ // x sacle
let dx = (left1 - left0);
dt = dx;
}else if(scale.ori === 1){
let dy = top1 - top0;
dt = dy;
}else{return;}

let xUnitsPerPx = u.posToVal(1, 'x') - u.posToVal(0, 'x');
let urange = []
for(let key in u.scales){
urange[key] = [u.scales[key].min, u.scales[key].max];
}

function onmove(e) {
e.preventDefault();
u.setScale(scale_key, {
min: umin + dt*scale_scale,
max: umax + dt*scale_scale,
});
// restore other scale
for(let key in urange){
if(key !== scale_key){
u.setScale(key, {
min: urange[key][0],
max: urange[key][1],
});
}
}

}

function onup(e) {
document.removeEventListener("mousemove", onmove);
document.removeEventListener("mouseup", onup);
}
document.addEventListener("mousemove", onmove);
document.addEventListener("mouseup", onup);
}
});

let left1 = e.clientX;
// let top1 = e.clientY;
// wheel scroll zoom
axis.addEventListener("wheel", e=>{
e.preventDefault();

let key = e.target._params[0];
let scale_key = u.axes[key].scale;

let range = u.scales[scale_key].max - u.scales[scale_key].min;
let val = (u.scales[scale_key].max + u.scales[scale_key].min)/2;

range = e.deltaY < 0 ? range *factor: range / factor;

let dx = xUnitsPerPx * (left1 - left0);
let nMin = val -range/2;
let nMax = val +range/2;

let urange = []
for(let key in u.scales){
urange[key] = [u.scales[key].min, u.scales[key].max];
}

u.setScale('x', {
min: scXMin0 - dx,
max: scXMax0 - dx,
u.batch(() => {
u.setScale(scale_key, {
min: nMin,
max: nMax,
});
});

for(let key in urange){
if(key !== scale_key){
u.setScale(key, {
min: urange[key][0],
max: urange[key][1],
});
}
}
});

}


// wheel drag pan on scale axes
over.addEventListener("mousedown", e => {
if (e.button == 1) {
e.preventDefault();
// 记录起始位置
let left0 = e.clientX;
let top0 = e.clientY;
let scY = new Array()
for(var key in u.scales){
scY[key] = [u.scales[key].min, u.scales[key].max, u.posToVal(1, key) - u.posToVal(0, key), u.scales[key].ori];
}
function onmove(e) {
e.preventDefault();

let left1 = e.clientX;
let top1 = e.clientY;

let dx = (left1 - left0);
let dy = top1 - top0;

for(var key in u.scales){
if(scY[key] !== null){
let dt = 0;
if(scY[key][3] === 0){
// x轴
dt = dx;
}
else if(scY[key][3] === 1){
// y 轴
dt = dy;
}else{
continue;
}
u.setScale(key, {
min: scY[key][0] - dt*scY[key][2],
max: scY[key][1] - dt*scY[key][2],
});
}

}
}

function onup(e) {
document.removeEventListener("mousemove", onmove);
document.removeEventListener("mouseup", onup);
}

document.addEventListener("mousemove", onmove);
document.addEventListener("mouseup", onup);
}
});

// wheel scroll zoom
//wheel scroll zoom
over.addEventListener("wheel", e => {
e.preventDefault();

let {left, top} = u.cursor;

let leftPct = left/rect.width;
let btmPct = 1 - top/rect.height;
let xVal = u.posToVal(left, "x");
let yVal = u.posToVal(top, "y");
let oxRange = u.scales.x.max - u.scales.x.min;
let oyRange = u.scales.y.max - u.scales.y.min;

let nxRange = e.deltaY < 0 ? oxRange * factor : oxRange / factor;
let nxMin = xVal - leftPct * nxRange;
let nxMax = nxMin + nxRange;
[nxMin, nxMax] = clamp(nxRange, nxMin, nxMax, xRange, xMin, xMax);
let oRange = new Array();
for(var key in u.scales){
let Val = 0;
// ??
if(u.scales[key].ori == 0){
Val = u.posToVal(left,key);
}else if(u.scales[key].ori == 1){
Val = u.posToVal(top, key)
}else{ continue;}

let nyRange = e.deltaY < 0 ? oyRange * factor : oyRange / factor;
let nyMin = yVal - btmPct * nyRange;
let nyMax = nyMin + nyRange;
[nyMin, nyMax] = clamp(nyRange, nyMin, nyMax, yRange, yMin, yMax);
let range = u.scales[key].max - u.scales[key].min;
let nRange = e.deltaY < 0 ? range * factor : range / factor;

let nMin = Val - leftPct * nRange;
let nMax = nMin + nRange;
oRange[key] = [nMin, nMax];
}
u.batch(() => {
u.setScale("x", {
min: nxMin,
max: nxMax,
});

u.setScale("y", {
min: nyMin,
max: nyMax,
});
for(var key in oRange){
u.setScale(key, {
min: oRange[key][0],
max: oRange[key][1],
});
}
});
});
}
Expand Down Expand Up @@ -169,4 +292,4 @@
makeChart();
</script>
</body>
</html>
</html>