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.

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

feat: add support for linear and constant point scaling via a new property called pointScaleMode #194

Merged
merged 2 commits into from
Sep 28, 2024

Conversation

abast
Copy link
Contributor

@abast abast commented Sep 27, 2024

Write one to two sentences summarizing this PR

This introduces two new modes:
(1) point size is kept constant, independent of zoom
(2) point size is proportional to zoom.

What was changed in this pull request?

  • the getPointScale method in index.js
  • an additional attribute POINT_SCALE_MODE was introduced, which allows to switch between three modes: 'constant', 'proportional' and 'default.

Why is it necessary?

Fixes #169

Checklist

  • Provided a concise title as a semantic commit message (e.g. "fix: correctly handle undefined properties")
  • CHANGELOG.md updated
  • Tests added or updated
  • Documentation in README.md added or updated
  • Example(s) added or updated
  • Screenshot, gif, or video attached for visual changes

basta added 2 commits September 26, 2024 15:47
…constant keeps point size constant, default keeps the current smart scaling strategy
Copy link
Owner

@flekschas flekschas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for taking a stab at different point scale functions. 🎉 The scaling modes look fine but we need to make a couple changes to ensure good performance.

Apart from that there are several missing aspects before I can merge the PR and cut a new release:

  • The new pointScaleMode property needs to be documented in README.md
  • The new pointScaleMode property needs to be typed in types.d.ts
  • The new pointScaleMode property needs to be changeable via the set function and gettable via the get function.
  • The CHANGELOG.md needs to be updated. Since this is a new feature, I suggest adding the change a new headline for 1.11.0.
  • The new scaling functions need to be tested. Unlike Jupyter Scatter, regl-scatterplot is rigorously tested ;)

I can help with some of this over the next days.

@@ -77,7 +77,7 @@ const scatterplot = createScatterplot({
pointSize,
showReticle,
reticleColor,
lassoInitiator: true,
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's revert this unnecessary change

@@ -502,6 +502,7 @@
</head>

<body>
<div>test</div>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove this test code :)

Comment on lines +1482 to +1495
if (pointScaleMode === 'proportional') {
return camera.scaling[0] * window.devicePixelRatio;
}
if (pointScaleMode === 'constant') {
return window.devicePixelRatio;
}
if (pointScaleMode === 'default') {
if (camera.scaling[0] > 1) {
return (
(Math.asinh(max(1.0, camera.scaling[0])) / Math.asinh(1)) *
window.devicePixelRatio
);
}
return max(minPointScale, camera.scaling[0]) * window.devicePixelRatio;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While this technically works, it's not the most performant way. Every time we call getPointScale() we would do the string comparison against pointScaleMode even though pointScaleMode is almost guaranteed to always be the same. This is particularly tricky because getPointScale is called very frequently when one zooms in or out.

A more efficient way would be to define three functions and assign either one to getPointScale according to pointScaleMode.

  const getConstantPointScale = () => {
    return window.devicePixelRatio;
  }
  const getLinearPointScale = () => {
    return max(minPointScale, camera.scaling[0]) * window.devicePixelRatio;
  }
  const getAsinhPointScale = () => {
    if (camera.scaling[0] > 1) {
      return (
        (Math.asinh(max(1.0, camera.scaling[0])) / Math.asinh(1)) *
        window.devicePixelRatio
      );
    }

    return max(minPointScale, camera.scaling[0]) * window.devicePixelRatio;
  };
  let getPointScale = getAsinhPointScale;
  if (pointScaleMode === 'linear') {
    getPointScale = getLinearPointScale;
  }
  if (pointScaleMode === 'constant') {
    getPointScale = getConstantPointScale;
  }

Some other notes: the linear scale must still respect minPointScale.

@flekschas flekschas changed the title Pointsize can be kept constant or proportional to zoom feat: add support for linear and constant point scaling via a new property called pointScaleMode Sep 27, 2024
@flekschas flekschas added the improvement Feature improvement or enhancement label Sep 27, 2024
@flekschas
Copy link
Owner

I made a bunch of changes to address most outstanding issues. I'll commit them later today or tomorrow

@abast
Copy link
Contributor Author

abast commented Sep 27, 2024

Thanks for addressing most of the outstanding issues! This is my first time working with javascript, so also thanks for the warm and encouraging response :)

@flekschas flekschas changed the base branch from master to point-scale-mode September 28, 2024 14:30
@flekschas
Copy link
Owner

I can't figure out how to push to your branch so I'll merge your branch into a new one I just created and then I'll push my changes onto the new branch :)

@flekschas flekschas self-requested a review September 28, 2024 14:31
@flekschas flekschas merged commit 74c403e into flekschas:point-scale-mode Sep 28, 2024
flekschas added a commit that referenced this pull request Sep 28, 2024
…perty called `pointScaleMode` (#195)

* feat: add support for linear and constant point scaling via a new property called `pointScaleMode` (#194)

* add pointScaleMode: proportional scales points proportional to zoom,  constant keeps point size constant, default keeps the current smart scaling strategy

* keep default mode to default; formatting

---------

Co-authored-by: basta <[email protected]>

* fix: remove nonsense

* refactor: ensure `getPointScale()` runs as fast as possible

* docs: update changelog

* docs: document and type `pointScaleMode`

* chore: revert accidentally removed comma

* fix: allow changing scale mode interactively

* test: add a test for point scale mode

---------

Co-authored-by: abast <[email protected]>
Co-authored-by: basta <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
improvement Feature improvement or enhancement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Constant point size when zooming
2 participants