Skip to content

Commit

Permalink
adjust mousewheel zoom at top of axis
Browse files Browse the repository at this point in the history
manage-dataset.js : datasetOwned() : handle dataset not being populated with data fields.
zoomPanCalcs.js : wheelNewDomain() : mousePosition : offset mousePosition by a portion of the yOffset of the axis relative to the <svg>; this works ok on Chrome, not Firefox. The whole of wheelNewDomain() can be updated to use recent d3 features - the calculations date back to the original prototype.
  • Loading branch information
Don-Isdale committed Aug 20, 2024
1 parent 643ae2e commit c8d2729
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 3 deletions.
2 changes: 1 addition & 1 deletion frontend/app/components/panel/manage-dataset.js
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export default ManageBase.extend({
ok = datasetClientId === sessionUserId;
dLog('datasetOwned', ok, datasetClientId, sessionUserId, this.get('dataset.id'));
const requestedBlocksSymbol = Symbol.for('requestedBlocks');
if (! dataset.blocks.length && dataset.tags.includes('BrAPI') &&
if (! dataset.blocks?.length && dataset.tags?.includes('BrAPI') &&
! dataset[requestedBlocksSymbol]) {
const server = dataset.server;
dataset[requestedBlocksSymbol] = true;
Expand Down
49 changes: 47 additions & 2 deletions frontend/app/utils/draw/zoomPanCalcs.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
/*----------------------------------------------------------------------------*/

import { isEqual } from 'lodash/lang';
import { pick } from 'lodash/object';

//------------------------------------------------------------------------------

Expand Down Expand Up @@ -173,6 +174,11 @@ function intervalDirection(interval, direction) {
* newDomain is the new domain resulting from the zoom change.
*/
function wheelNewDomain(event, axis, axisApi, inFilter) {
const fnName = 'wheelNewDomain';
/** axis1d is also the datum of event.currentTarget, which is e.g.
* <g class="axis-all" id="all60db119e162b5e27516170a3">
* i.e. axis1d = event.currentTarget.__data__
*/
const axis1d = axis;
let yp = axis.y;
/* if the axis does not yet have a domain then it won't have a scale.
Expand Down Expand Up @@ -230,7 +236,7 @@ function wheelNewDomain(event, axis, axisApi, inFilter) {

if (noDomain(axisReferenceDomain)) {
if (trace_zoom)
dLog('wheelNewDomain() no domain yet', axisReferenceDomain);
dLog(fnName, '() no domain yet', axisReferenceDomain);
axisReferenceDomain = undefined;
}
if (axisReferenceDomain === undefined) {
Expand Down Expand Up @@ -275,7 +281,46 @@ function wheelNewDomain(event, axis, axisApi, inFilter) {
}
else /* zoom */ {
/** mousePosition used as centre for zoom, not used for pan. */
let mousePosition = e.layerY;
let mousePosition = e.layerY; // or .offsetY, similar value

/** Offset mousePosition by a portion of the y offset of the axis relative
* to the <svg>. At the top of the axis use all of yOffset, and at the
* bottom use 0, and use a linear proportion in between. This appears to
* work, but is brittle and will be replaced - this function is due for a
* rewrite.
*/
const
oa = axis1d.drawMap.oa,
/** oa.svgContainer.node() is the top-level element within <svg> :
* <svg class="FeatureMapViewer"
* <g transform="translate(0,1)">
*/
svg = oa.svgContainer.node().parentElement,
svgRect = svg.getBoundingClientRect(),
/** event.target is the reference for the mouse movement :
* <rect class="overlay" pointer-events="all" cursor="crosshair" x="-8" y="0" width="16" height="391.35"></rect>
*/
target = event.target,
targetRect = target.getBoundingClientRect(),
yOffset = targetRect.y - svgRect.y;

if (trace_zoom > 1) {
const
fieldNames = ["clientY", "deltaY", "layerY", "movementY", "offsetY",
"pageY", "screenY", "wheelDeltaY"],
y = pick(event, fieldNames);
dLog(fnName, yOffset, mousePosition, 'y', y);
}

if (yOffset > 0) {
trace_zoom && dLog(fnName, yOffset, mousePosition);
/** This works ok on Chrome, not Firefox. The whole of
* wheelNewDomain() can be updated to use recent d3 features */
const maxY = 400;
mousePosition -= yOffset * (maxY - mousePosition) / (maxY - yOffset);
}


if ((trace_zoom > 1) && mousePosition)
console.log('mousePosition', mousePosition);
let
Expand Down

0 comments on commit c8d2729

Please sign in to comment.