React-diagrams: Zoom-In and Zoom-Out events for DiagramEngine

[pmehta18]

Can anybody tell me how we can manage zoom-in & zoom-out events explicitly?
For example, if I want to zoom-in the engine on the click of button instead of using the mouse wheel?

Thanks in advance.

[wstuckey]

I second this question, I have been trying to figure this out for awhile now.

[pmehta18]

@wstuckey You can take reference from below snippet which I tried and see if it helps.
let scaleFactor = 1; function zoomIn() { scaleFactor += (-10 * -0.01); scaleFactor = Math.min(Math.max(.125, scaleFactor), 1.5); this.customRef.style.transform =scale(${scaleFactor}); } function zoomOut() { scaleFactor += (10 * -0.01); scaleFactor = Math.min(Math.max(.125, scaleFactor), 1.5); this.scaleFactor = Math.max(this.scaleFactor, 0.5); this.customRef.style.transform =scale(${scaleFactor}); }

[dylanvorster]

to change the zoom:

https://github.com/projectstorm/react-diagrams/blob/2df09edb7e5716a68884ed6d68faa78068003f52/src/widgets/DiagramWidget.tsx#L451

To respond to zoom:

https://github.com/projectstorm/react-diagrams/blob/2df09edb7e5716a68884ed6d68faa78068003f52/src/models/DiagramModel.ts#L20

[JitendraBhamidipati]

@dylanvorster I am trying to set the zoom with dropdown. It was not working for me in 6.0.2 version.

engine.model.setZoomLevel(25)

[renato-bohler]

@JitendraBhamidipati you mean something like that?

I've implemented this on my project (logossim). You can try it out here.

And here's the code for the functions that handles these dropdown items. Basically, it calls engine.getActionEventBus().fireAction with some specific paramaters.