From: Robert Konigsberg Date: Thu, 23 Dec 2010 06:38:39 +0000 (-0800) Subject: Gah, fixed spacing in interaction.js X-Git-Tag: v1.0.0~584^2~12 X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=2c1befcbc7f5540004910f41a8c50c708a914765;p=dygraphs.git Gah, fixed spacing in interaction.js --- diff --git a/tests/interaction.js b/tests/interaction.js index 3e72c78..1449e71 100644 --- a/tests/interaction.js +++ b/tests/interaction.js @@ -1,198 +1,198 @@ - function downV3(event, g, context) { - context.initializeMouseDown(event, g, context); - if (event.altKey || event.shiftKey) { - Dygraph.startZoom(event, g, context); - } else { - Dygraph.startPan(event, g, context); - } - } - - function moveV3(event, g, context) { - if (context.isPanning) { - Dygraph.movePan(event, g, context); - } else if (context.isZooming) { - Dygraph.moveZoom(event, g, context); - } - } - - function upV3(event, g, context) { - if (context.isPanning) { - Dygraph.endPan(event, g, context); - } else if (context.isZooming) { - Dygraph.endZoom(event, g, context); - } - } - - // Take the offset of a mouse event on the dygraph canvas and - // convert it to a pair of percentages from the bottom left. - // (Not top left, bottom is where the lower value is.) - function offsetToPercentage(g, offsetX, offsetY) { - // This is calculating the pixel offset of the leftmost date. - var xOffset = g.toDomCoords(g.xAxisRange()[0], null)[0]; - var yar0 = g.yAxisRange(0); - - // This is calculating the pixel of the higest value. (Top pixel) - var yOffset = g.toDomCoords(null, yar0[1])[1]; - - // x y w and h are relative to the corner of the drawing area, - // so that the upper corner of the drawing area is (0, 0). - var x = offsetX - xOffset; - var y = offsetY - yOffset; - - // This is computing the rightmost pixel, effectively defining the - // width. - var w = g.toDomCoords(g.xAxisRange()[1], null)[0] - xOffset; - - // This is computing the lowest pixel, effectively defining the height. - var h = g.toDomCoords(null, yar0[0])[1] - yOffset; - - // Percentage from the left. - var xPct = w == 0 ? 0 : (x / w); - // Percentage from the top. - var yPct = h == 0 ? 0 : (y / h); - - // The (1-) part below changes it from "% distance down from the top" - // to "% distance up from the bottom". - return [xPct, (1-yPct)]; - } - - function dblClickV3(event, g, context) { - // Reducing by 20% makes it 80% the original size, which means - // to restore to original size it must grow by 25% - var percentages = offsetToPercentage(g, event.offsetX, event.offsetY); - var xPct = percentages[0]; - var yPct = percentages[1]; - - if (event.ctrlKey) { - zoom(g, -.25, xPct, yPct); - } else { - zoom(g, +.2, xPct, yPct); - } - } - - function scrollV3(event, g, context) { - var normal = event.detail ? event.detail * -1 : event.wheelDelta / 40; - // For me the normalized value shows 0.075 for one click. If I took - // that verbatim, it would be a 7.5%. - var percentage = normal / 50; - - var percentages = offsetToPercentage(g, event.offsetX, event.offsetY); - var xPct = percentages[0]; - var yPct = percentages[1]; - - zoom(g, percentage, xPct, yPct); - Dygraph.cancelEvent(event); - } - - // Adjusts [x, y] toward each other by zoomInPercentage% - // Split it so the left/bottom axis gets xBias/yBias of that change and - // tight/top gets (1-xBias)/(1-yBias) of that change. - // - // If a bias is missing it splits it down the middle. - function zoom(g, zoomInPercentage, xBias, yBias) { - xBias = xBias || 0.5; - yBias = yBias || 0.5; - function adjustAxis(axis, zoomInPercentage, bias) { - var delta = axis[1] - axis[0]; - var increment = delta * zoomInPercentage; - var foo = [increment * bias, increment * (1-bias)]; - return [ axis[0] + foo[0], axis[1] - foo[1] ]; - } - var yAxes = g.yAxisRanges(); - var newYAxes = []; - for (var i = 0; i < yAxes.length; i++) { - newYAxes[i] = adjustAxis(yAxes[i], zoomInPercentage, yBias); - } - - g.updateOptions({ - dateWindow: adjustAxis(g.xAxisRange(), zoomInPercentage, xBias), - valueRange: newYAxes[0] - }); - } - - var v4Active = false; - var v4Canvas = null; - - function downV4(event, g, context) { - context.initializeMouseDown(event, g, context); - v4Active = true; - moveV4(event, g, context); // in case the mouse went down on a data point. - } - - var processed = []; - - function moveV4(event, g, context) { - var RANGE = 7; - - if (v4Active) { - var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(g.graphDiv); - var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(g.graphDiv); - - var rows = g.numRows(); - // Row layout: - // [date, [val1, stdev1], [val2, stdev2]] - for (var row = 0; row < rows; row++) { - var date = g.getValue(row, 0); - var x = g.toDomCoords(date, null)[0]; - var diff = Math.abs(canvasx - x); - if (diff < RANGE) { - for (var col = 1; col < 3; col++) { - // TODO(konigsberg): these will throw exceptions as data is removed. - var vals = g.getValue(row, col); - if (vals == null) { continue; } - var val = vals[0]; - var y = g.toDomCoords(null, val)[1]; - var diff2 = Math.abs(canvasy - y); - if (diff2 < RANGE) { - var found = false; - for (var i in processed) { - var stored = processed[i]; - if(stored[0] == row && stored[1] == col) { - found = true; - break; - } - } - if (!found) { - processed.push([row, col]); - drawV4(x, y); - } - return; - } +function downV3(event, g, context) { + context.initializeMouseDown(event, g, context); + if (event.altKey || event.shiftKey) { + Dygraph.startZoom(event, g, context); + } else { + Dygraph.startPan(event, g, context); + } +} + +function moveV3(event, g, context) { + if (context.isPanning) { + Dygraph.movePan(event, g, context); + } else if (context.isZooming) { + Dygraph.moveZoom(event, g, context); + } +} + +function upV3(event, g, context) { + if (context.isPanning) { + Dygraph.endPan(event, g, context); + } else if (context.isZooming) { + Dygraph.endZoom(event, g, context); + } +} + +// Take the offset of a mouse event on the dygraph canvas and +// convert it to a pair of percentages from the bottom left. +// (Not top left, bottom is where the lower value is.) +function offsetToPercentage(g, offsetX, offsetY) { + // This is calculating the pixel offset of the leftmost date. + var xOffset = g.toDomCoords(g.xAxisRange()[0], null)[0]; + var yar0 = g.yAxisRange(0); + + // This is calculating the pixel of the higest value. (Top pixel) + var yOffset = g.toDomCoords(null, yar0[1])[1]; + + // x y w and h are relative to the corner of the drawing area, + // so that the upper corner of the drawing area is (0, 0). + var x = offsetX - xOffset; + var y = offsetY - yOffset; + + // This is computing the rightmost pixel, effectively defining the + // width. + var w = g.toDomCoords(g.xAxisRange()[1], null)[0] - xOffset; + + // This is computing the lowest pixel, effectively defining the height. + var h = g.toDomCoords(null, yar0[0])[1] - yOffset; + + // Percentage from the left. + var xPct = w == 0 ? 0 : (x / w); + // Percentage from the top. + var yPct = h == 0 ? 0 : (y / h); + + // The (1-) part below changes it from "% distance down from the top" + // to "% distance up from the bottom". + return [xPct, (1-yPct)]; +} + +function dblClickV3(event, g, context) { + // Reducing by 20% makes it 80% the original size, which means + // to restore to original size it must grow by 25% + var percentages = offsetToPercentage(g, event.offsetX, event.offsetY); + var xPct = percentages[0]; + var yPct = percentages[1]; + + if (event.ctrlKey) { + zoom(g, -.25, xPct, yPct); + } else { + zoom(g, +.2, xPct, yPct); + } +} + +function scrollV3(event, g, context) { + var normal = event.detail ? event.detail * -1 : event.wheelDelta / 40; + // For me the normalized value shows 0.075 for one click. If I took + // that verbatim, it would be a 7.5%. + var percentage = normal / 50; + + var percentages = offsetToPercentage(g, event.offsetX, event.offsetY); + var xPct = percentages[0]; + var yPct = percentages[1]; + + zoom(g, percentage, xPct, yPct); + Dygraph.cancelEvent(event); +} + +// Adjusts [x, y] toward each other by zoomInPercentage% +// Split it so the left/bottom axis gets xBias/yBias of that change and +// tight/top gets (1-xBias)/(1-yBias) of that change. +// +// If a bias is missing it splits it down the middle. +function zoom(g, zoomInPercentage, xBias, yBias) { + xBias = xBias || 0.5; + yBias = yBias || 0.5; + function adjustAxis(axis, zoomInPercentage, bias) { + var delta = axis[1] - axis[0]; + var increment = delta * zoomInPercentage; + var foo = [increment * bias, increment * (1-bias)]; + return [ axis[0] + foo[0], axis[1] - foo[1] ]; + } + var yAxes = g.yAxisRanges(); + var newYAxes = []; + for (var i = 0; i < yAxes.length; i++) { + newYAxes[i] = adjustAxis(yAxes[i], zoomInPercentage, yBias); + } + + g.updateOptions({ + dateWindow: adjustAxis(g.xAxisRange(), zoomInPercentage, xBias), + valueRange: newYAxes[0] + }); +} + +var v4Active = false; +var v4Canvas = null; + +function downV4(event, g, context) { + context.initializeMouseDown(event, g, context); + v4Active = true; + moveV4(event, g, context); // in case the mouse went down on a data point. +} + +var processed = []; + +function moveV4(event, g, context) { + var RANGE = 7; + + if (v4Active) { + var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(g.graphDiv); + var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(g.graphDiv); + + var rows = g.numRows(); + // Row layout: + // [date, [val1, stdev1], [val2, stdev2]] + for (var row = 0; row < rows; row++) { + var date = g.getValue(row, 0); + var x = g.toDomCoords(date, null)[0]; + var diff = Math.abs(canvasx - x); + if (diff < RANGE) { + for (var col = 1; col < 3; col++) { + // TODO(konigsberg): these will throw exceptions as data is removed. + var vals = g.getValue(row, col); + if (vals == null) { continue; } + var val = vals[0]; + var y = g.toDomCoords(null, val)[1]; + var diff2 = Math.abs(canvasy - y); + if (diff2 < RANGE) { + var found = false; + for (var i in processed) { + var stored = processed[i]; + if(stored[0] == row && stored[1] == col) { + found = true; + break; } } + if (!found) { + processed.push([row, col]); + drawV4(x, y); + } + return; } } } - - function upV4(event, g, context) { - if (v4Active) { - v4Active = false; - } - } - - function dblClickV4(event, g, context) { - restorePositioning(g4); - } - - function drawV4(x, y) { - var ctx = v4Canvas; - - ctx.strokeStyle = "#000000"; - ctx.fillStyle = "#FFFF00"; - ctx.beginPath(); - ctx.arc(x,y,5,0,Math.PI*2,true); - ctx.closePath(); - ctx.stroke(); - ctx.fill(); - } - - function captureCanvas(canvas, area, g) { - v4Canvas = canvas; - } - - function restorePositioning(g) { - g.updateOptions({ - dateWindow: null, - valueRange: null - }); - } + } + } +} + +function upV4(event, g, context) { + if (v4Active) { + v4Active = false; + } +} + +function dblClickV4(event, g, context) { + restorePositioning(g4); +} + +function drawV4(x, y) { + var ctx = v4Canvas; + + ctx.strokeStyle = "#000000"; + ctx.fillStyle = "#FFFF00"; + ctx.beginPath(); + ctx.arc(x,y,5,0,Math.PI*2,true); + ctx.closePath(); + ctx.stroke(); + ctx.fill(); +} + +function captureCanvas(canvas, area, g) { + v4Canvas = canvas; +} + +function restorePositioning(g) { + g.updateOptions({ + dateWindow: null, + valueRange: null + }); +}