React-diagrams: Zooming no longer works as expected on Chrome 73+

[CarlousF]

As of Chrome 73, attempting to zoom in / out of the DiagramWidget causes the entire page to scroll at the same time as zooming in / out of the diagram, with the following error appearing in the developer console:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312

As the error suggests, this appears to be caused by the fact that onWheel events are now automatically treated as passive, requiring developers to set passive to false manually when defining the onWheel event.

[kmannislands]

Seems this is the issue described in https://github.com/facebook/react/issues/6436 as well.

[riyadshauk]

I'm not disregarding the fact that this is still a problem and should be fixed in storm-react-diagrams.

However, this behavior can be fixed in your own codebase (in terms of functionality) by using your own ModifiedDiagramWidget, locally saved in your project, rather than { DiagramWidget } from storm-react-diagrams.

Just wrap the div returned in the render method, as suggested in the comment (from the issue @kmannislands referenced) here: facebook/react/issues/6436#issuecomment-477819667.

Then, another problem arises when working in development, using npm start. You will get an error which says: Error: "element" is read-only _readOnlyError node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/readOnlyError.js:2. To get around this error which causes the app to crash in development, simply comment out the line in the referenced file throw new Error("\"" + name + "\" is read-only"); (assuming you haven't ejected your react app and thus don't have access to a webpack or babel file to properly set the flags to disable strict mode in development).

In production, the error shouldn't occur, since it's a strict mode issue for help with debugging errors.

Thanks to @CarlousF and @kmannislands for pointing us users/developers in the right direction thus far!

[dylanvorster]

Fixed