Skip to content

New: Add support for handling device pixel ratio - #45

Merged
tonilastre merged 5 commits into
release/1.0.0from
new/add-device-pixel-ratio
Feb 20, 2024
Merged

New: Add support for handling device pixel ratio#45
tonilastre merged 5 commits into
release/1.0.0from
new/add-device-pixel-ratio

Conversation

@tonilastre

Copy link
Copy Markdown
Contributor

The following PR adds support for automatic and manual handling of devicePixelRatio. More information about devicePixelRatio can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

There are two modes: Automatic and Manual.

Automatic devicePixelRatio handler (default)
The default behavior is the automatic handler of the devicePixelRatio value and changes (e.g. user drags a view from one display to another with a different DPR value). The automatic handler is turned on when the settings value render.devicePixelRatio equals to null.

Manual devicePixelRatio handler
If you want to manually handle the devicePixelRatio values, just set the settings value render.devicePixelRatio to a numeric DPR value. Orb will stop listening for DPR changes then.

This fixes issue #19.

@tonilastre tonilastre added documentation Improvements or additions to documentation enhancement labels Feb 24, 2023
@tonilastre tonilastre self-assigned this Feb 24, 2023
@tonilastre
tonilastre requested a review from cizl as a code owner February 24, 2023 13:54
@tonilastre
tonilastre changed the base branch from release/0.2.x to release/1.0.0 April 4, 2023 14:54
@tonilastre
tonilastre force-pushed the new/add-device-pixel-ratio branch from 1716092 to e0b61fe Compare May 12, 2023 11:14
@tonilastre tonilastre added this to the v1.0.0 milestone Feb 16, 2024
Comment thread src/renderer/canvas/canvas-renderer.ts Outdated
}

// Change DPR from automatic to manual handling or change DPR value manually
if (!isNumber(previousDprValue) && isNumber(newDprValue) && newDprValue !== previousDprValue) {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Nitpicking, but is newDprValue !== previousDprValue necessary here? It seems it's always true because newDprValue is a number while previousDprValue is not. On the other hand, !isNumber(previousDprValue) can be removed to allow users to change the DPR value more than once, but it does not seem like a real use case.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yep you are right, newDrpValue !== previousDprValue can be removed, but not the other check.

This is removing automatic observer for DPR. You can see on line 87 that it checks if settings doesn't have DPR, it will start automatic observer that checked for DPR from the browser.

So these lines 137 and 143 are for:

  • 137: Stop the automatic observer - this can happen only if previousDPR was not a number, and the new value is defined
  • 142: Start the observer again - this can happen only if previousDRP was a number, and the new value is null (this enables users to remove manual DPR handling).

Users can still change DPR manually which happens on line 127.

Comment thread src/renderer/canvas/canvas-renderer.ts Outdated
}

private _resize() {
const dpr = this._settings.devicePixelRatio || window.devicePixelRatio;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Nitpicking, but it would be nice to add a check for window.devicePixelRatio being null or undefined, just in case of older browsers that do not support this. I think using || 1 will do the job.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Not nitpicking, but it's a valid bug. Great catch.

Comment thread src/renderer/canvas/canvas-renderer.ts Outdated
Comment thread src/renderer/canvas/canvas-renderer.ts Outdated

@AlexIchenskiy AlexIchenskiy left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Looks good to me now!

@tonilastre
tonilastre merged commit cdb3a6d into release/1.0.0 Feb 20, 2024
@tonilastre
tonilastre deleted the new/add-device-pixel-ratio branch February 20, 2024 10:48
tonilastre added a commit that referenced this pull request Jul 28, 2026
… tooling

* Fix: Fix multiple maps issue (#33)

* Chore: Update package.json version

* New: Change the API to handle OrbView and OrbMapView (#34)

* New: Change the API to handle OrbView and OrbMapView

* New: Change the API for select/hover strategies

* Chore: Release/1.0.0

* New: Add support to get selected/hovered nodes and edges (#61)

* New: Added support to get selected nodes and edges

* New: Added support to get hovered nodes and edges

---------

Co-authored-by: Abhinav Singh Parmar <abhinavparmar147@gmail.com>

* New: Add support for enabling and disabling dragging of nodes (fixes #62) (#69)

* New: Add feature to enable/disable node dragging (fixes #62)

* New: Added support to modify interaction from setSettings

* New: Updated documentation for interaction property

* New: Add feature to enable/disable zoom (fixes #62)

* NEW: Updated documentation for interaction property

* NEW: Updated documentation to include isDragEnabled

* New: Add support for custom edge line style (#77)

* New Added support for custom edges

* Refactor: Streamline edge rendering code and optimize line style handling

* New: Add support for handling device pixel ratio (#45)

* Chore: Move container and canvas creation from the view to the renderer

* New: Add devicePixelRatio render property and handler

* Fix: Add default DPR for older browsers

* Chore: Remove useless check for automatic DPR

* New: Add new simulator (#56) (#57)

* New: Add new simulator (#56)

* New: Add simulator scenarios for manual testing
* New: Refactor simulator (WIP)
* New: Add progress overlay, Update descriptions
* Fix: Introduce new simulator event, Fix main-thread behavior
* Fix: Rearrange class methods based on visibility
* Fix: Improve naming
* Chore(release): 0.2.0
* Fix: Tweak simulator, adjust API slightly
* Fix: Temporarily patch some physics behavior
* Fix: Adjust re-heating parameters
* Fix: tweak physics behavior -> immediately stop sim when disabling
* Chore: Remove the beta from release branches

---------

Co-authored-by: dlozic <davidlozic@gmail.com>

* New: Add zoom and recenter functions (#74)

* New: Add zoom and recenter functions

* Fix: Reduce excessive recentering (#75)

* Fix: Remove excessive recenterings
* Fix: Remove unused code

* Fix: New simulator (#92)

* Chore: Refactor naming

* New: Add new events

* Chore: Refactor code styling

* Docs: Remove unused flags

* Chore: Remove unused simulation functions

* Chore: Refactor view render function calls

* Chore: Add missing tests

* New: Add removal functions (#96)

* New: Add removal functions

* Fix: Add missing callback data

* Chore: Refactor remove return values

* Chore: Refactor remove function type usage

* Fix: Default settings for node placement (#98)

* New: Add properties setters and getters (#93)

* New: Add node properties setters

* New: Add edge properties setters

* New: Add properties getters

* New: Add patch for nodes and edges

* Fix: Make getters return copies

* Fix: Edge factory listeners copying

* Fix: Jest outdated tests

* Fix: Github actions node version

* Chore: Refactor observer interface

* Chore: Refactor node/edge constructor settings

* Chore: Refactor node/edge function grouping

* Chore: Refactor node/edge function grouping

* Fix: Listeners behaviour

* Chore: Refactor property copying

* Chore: Refactor subject implementation

* Fix: Set position behaviour on node drag

* Chore: Upgrade node version

* Chore: Refactor function type check

* Fix: Remove listener behaviour

* Chore: Refactor util naming

* Chore: Remove unused type assertion

* Chore: Refactor position setter options

* Chore: Refactor property patch function

* Fix: Set map node position behaviour

* Chore: Refactor simulator data patching

* Chore: Change observers to callbacks

* New: Add state setters with options (#95)

* New: Add state setters with options

* Chore: Remove leftover comments

* Chore: Refactor state setter logic

* Chore: Refactor state types

* Fix: Rename merged function usage

* Fix: Merged variable naming

* Chore: Fix tests

---------

Co-authored-by: dlozic <davidlozic@gmail.com>
Co-authored-by: Oleksandr Ichenskyi <55350107+AlexIchenskiy@users.noreply.github.com>
Co-authored-by: AlexIchenskiy <aichenskiy@gmail.com>

* New: Add zoom in and out functions (#100)

* Fix: Skip unnecessary listener notify on set style

* Fix: remove unnecessary rerender on state change

* Chore: Update documentation

* Fix: Node/edge getter performance issue

* Chore: Add data change docs example

* Fix: Docs typos

* Fix: Disable source map generation (#105)

* New: Add tree layout (#107)

* New: Add new layouts

* New: Add layout options

* Chore: Make layout dynamically changeable

* Chore: Update docs

* Fix: Naming typo

* Chore: Refactor layouts

* New: Enable layout node add/remove

* Chore: Improve behavior for recurrent nodes

* Chore: Move some simulator settings to layout

* Chore: Refactor code quality and performance

* Fix: Layout behavior on change

* Chore: Add recenter on layout change

* Fix: Layout change behavior

* Fix: Simulation behavior on data deletion

* Chore: Add recenter on layout change

* Fix: Change layout engine logic (#108)

* Fix: Change layout engine logic

* New: Add simulation cancellation logic

* Chore: Remove leftover code

* Fix: Hierarchical layout recenter logic

* Chore: Refactor package versions and code logic

* Fix: Refactor function types

* New: Add multiselect (#110)

* New: Add multiselect

* Chore: Simplify logic

* Chore: Update package.json

* New: Add SVG export (#111)

* New: Add SVG export

* Chore: Refactor code quality

* New: Add WebGL renderer (#109)

* New: Add WebGL renderer

* New: Add naive WebGL force layout computation

* New: Add WebGL improved node/shape geometry options

* New: Add labels and node images

* Fix: GPU drag behavior

* Chore: Remove leftover comments

* Fix: WebGL renderer style invalidating

* Chore: Refactor code quality

* Chore: Add WebGL example and docs

* New: Add docs page (#112)

* New: Add docs page

* New: Add more docs examples

* Update .github/workflows/docs.yml

---------

Co-authored-by: Toni <toni.lastre@memgraph.io>

* Chore: Finish up the release process

* Chore: Fix sync between package.json files

* Chore: Add new package-lock.json

---------

Co-authored-by: David <davidlozic@gmail.com>
Co-authored-by: Abhinv Singh Parmar <abhi171b010@gmail.com>
Co-authored-by: Abhinav Singh Parmar <abhinavparmar147@gmail.com>
Co-authored-by: Abhinv Singh Parmar <abhinav.parmar@infosys.com>
Co-authored-by: Oleksandr Ichenskyi <55350107+AlexIchenskiy@users.noreply.github.com>
Co-authored-by: AlexIchenskiy <aichenskiy@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants