projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.72k stars 1.18k forks source link

Scroll Zoom in Firefox / Adjust zoom sensitivity #360

Open lukethacoder opened 5 years ago

lukethacoder commented 5 years ago

Zooming in Firefox still seems to be broken?

Would a more future proof solution be adding a zoomSensitivity prop to the <DiagramWidget/>?

Even as browsers change their behavior and being cross compatible, you could dynamically change the zoomSensitivity level based on the browser.

const zoom_sensitivity = 1.2;

<DiagramWidget
  zoomSensitivity={zoom_sensitivity}
  diagramEngine={this.engine}
/>
JeremyRubin commented 4 years ago

Following up here:

Do we think that the issue is cross browser entirely or is there a system component? I.e., is it feasible to add code to autodetect the correct zoom sensitivity, or will certain systems+browser combos always be wonky?

Blackpinned commented 4 years ago

Has there been any info about this? As far as I can tell it's still slow on firefox and I can't seem to figure out if there's a way to change sensitivity yet?

renato-bohler commented 4 years ago

@Blackpinned I've found a solution to this, as I posted here: https://github.com/projectstorm/react-diagrams/issues/516#issuecomment-572021438.

I'm not sure if this is a good solution, and that's why I haven't opened a pull request with these changes... but you could apply them to your project if you really need.

renato-bohler commented 4 years ago

In case anyone needs some guidance, I've implemented a custom zoom action that allows only for a limited number of zoom levels. You can check out the code in this commit: https://github.com/renato-bohler/logossim/pull/22/commits/dbc1b8b8a804d4c2974d1e5cf86d039ef32f6acc

GKooijmans commented 3 years ago

Hoping to bump this issue a bit :) I would love to see the solution @renato-bohler offered in #516 pulled in. Current behavior in Firefox is really a pain for me..

aaron-michaux commented 3 years ago

What's this <DiagramWidget>? I cannot find it in the react-diagrams repo, and it's not in the demos.