8000 feat: Add min/max scale limits for geo plots by camdecoster · Pull Request #7371 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

feat: Add min/max scale limits for geo plots #7371

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

Draft
wants to merge 12 commits into
base: master
Choose a base branch
from
Draft

feat: Add min/max scale limits for geo plots #7371

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
57307ee
feat(geo): support min/max scale limits
mojoaxel Oct 5, 2020
d870252
refactor: rename min/max scale limits
mojoaxel Oct 26, 2020
2d9e5f2
chore: use dflt: -1 instad of null
mojoaxel Oct 26, 2020
dd635ee
feat: handle maxscale default in scaleExtent
mojoaxel Oct 26, 2020
8a2c0c5
chore: only rerender on zoom if scale changes
mojoaxel Oct 26, 2020
f882191
chore: fix typo in min/maxscale attributes
mojoaxel Oct 26, 2020
8ed949f
test: adopt test/plot-schema.json to new plot-schema
mojoaxel Jun 10, 2024
29b4316
Trigger initial zoom event to set minscale
camdecoster Feb 18, 2025
048f178
Switch to ES5 syntax
camdecoster Feb 21, 2025
c6007a8
Merge remote-tracking branch 'origin/master' into cam/5192/add-min-ma…
camdecoster Feb 21, 2025
84cd037
Switch to getBBox and fix zoom.event call
camdecoster Feb 22, 2025
d9fca8b
Add draft log
camdecoster Feb 22, 2025
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
Prev Previous commit
Next Next commit
Trigger initial zoom event to set minscale
  • Loading branch information
@camdecoster
camdecoster committed Feb 18, 2025
commit 29b4316ed781bf93f17a9b34ff529e7acbfd2781
21 changes: 13 additions & 8 deletions src/plots/geo/geo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,7 +484,11 @@ proto.updateFx = function(fullLayout, geoLayout) {

if(dragMode === 'pan') {
bgRect.node().onmousedown = null;
bgRect.call(createGeoZoom(_this, geoLayout));
const zoom = createGeoZoom(_this, geoLayout)
bgRect.call(zoom);
// TODO: Figure out how to restrict when this transition occurs. Or is it a no-op if nothing has changed?
// Trigger transition to handle if minscale attribute isn't 0
zoom.event(bgRect.transition())
bgRect.on('dblclick.zoom', zoomReset);
if(!gd._context._scrollZoom.geo) {
bgRect.on('wheel.zoom', null);
Expand Down Expand Up @@ -709,14 +713,15 @@ function getProjection(geoLayout) {

projection.precision(constants.precision);

// https://github.com/d3/d3-zoom/blob/master/README.md#zoom_scaleExtent
projection.scaleExtent = function() {
var minscale = projLayout.minscale;
var maxscale = projLayout.maxscale;
if(maxscale === -1) maxscale = Infinity;
return [100 * minscale, 100 * maxscale];
// https://d3js.org/d3-zoom#zoom_scaleExtent
projection.scaleExtent = () => {
let { minscale, maxscale } = projLayout;
maxscale = maxscale === -1 ? Infinity : maxscale;
const max = Math.max(minscale, maxscale);
const min = Math.min(minscale, maxscale);
return [100 * min, 100 * max];
};

if(geoLayout._isSatellite) {
projection.tilt(projLayout.tilt).distance(projLayout.distance);
}
Expand Down
21 changes: 16 additions & 5 deletions src/plots/geo/zoom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,16 +133,21 @@ function zoomNonClipped(geo, projection) {
function handleZoomstart() {
d3.select(this).style(zoomstartStyle);

mouse0 = d3.mouse(this);
const { bottom, left, right, top } = this.getBoundingClientRect()
mouse0 = d3.event.sourceEvent
? d3.mouse(this)
: [(left + right) / 2, (bottom + top) / 2];
rotate0 = projection.rotate();
translate0 = projection.translate();
lastRotate = rotate0;
zoomPoint = position(mouse0);
}

function handleZoom() {
mouse1 = d3.mouse(this);

const { bottom, left, right, top } = this.getBoundingClientRect()
mouse1 = d3.event.sourceEvent
? d3.mouse(this)
: [(left + right) / 2, (bottom + top) / 2];
if(outside(mouse0)) {
zoom.scale(projection.scale());
zoom.translate(projection.translate());
Expand Down Expand Up @@ -211,7 +216,10 @@ function zoomClipped(geo, projection) {
zoom.on('zoomstart', function() {
d3.select(this).style(zoomstartStyle);

var mouse0 = d3.mouse(this);
const { bottom, left, right, top } = this.getBoundingClientRect()
let mouse0 = d3.event.sourceEvent
? d3.mouse(this)
: [(left + right) / 2, (bottom + top) / 2];
var rotate0 = projection.rotate();
var lastRotate = rotate0;
var translate0 = projection.translate();
Expand All @@ -220,7 +228,10 @@ function zoomClipped(geo, projection) {
zoomPoint = position(projection, mouse0);

zoomOn.call(zoom, 'zoom', function() {
var mouse1 = d3.mouse(this);
const { bottom, left, right, top } = this.getBoundingClientRect()
let mouse1 = d3.event.sourceEvent
? d3.mouse(this)
: [(left + right) / 2, (bottom + top) / 2];

projection.scale(view.k = d3.event.scale);

Expand Down
0