Open zhuj opened 7 years ago
Currently, zoom (mouse wheel) has several problems:
The core responsible for that is in DiagramWidget.onWheel.
DiagramWidget.onWheel
My suggestion is to change it slightly to the following:
onWheel(event) { const { diagramEngine } = this.props; const actions = this.getActions(); if (!actions.zoom) { return; } const diagramModel = diagramEngine.getDiagramModel(); event.preventDefault(); event.stopPropagation(); /* ------------------------------------- */ /* --- ADD ----------------------------- */ const relativeMouse = diagramEngine.getRelativeMousePoint(event); const initialOffsetX = diagramModel.getOffsetX(); const initialOffsetY = diagramModel.getOffsetY(); const initialZoom = diagramModel.getZoomLevel(); const zoom = initialZoom + (event.deltaY * (initialZoom / 100.0) * 0.2); diagramModel.setOffset( (relativeMouse.x + initialOffsetX) * (initialZoom/zoom) - relativeMouse.x, (relativeMouse.y + initialOffsetY) * (initialZoom/zoom) - relativeMouse.y ); /* --- ADD ----------------------------- */ /* ------------------------------------- */ diagramModel.setZoomLevel(zoom); diagramEngine.enableRepaintEntities([]); this.forceUpdate(); }
Please find the changes in the commit - https://github.com/zhuj/react-js-diagrams/commit/16a90aef5db46371fc55fae5e29c2ca1dc967ec4
It will make the zooming more smoothly (it won't matter how you like to scroll the wheel - zoom will be linear) and current mouse position-centered (nodes will be exposed/collapsed over the current mouse position).
Any thoughts?
Currently, zoom (mouse wheel) has several problems:
The core responsible for that is in
DiagramWidget.onWheel
.My suggestion is to change it slightly to the following:
Please find the changes in the commit - https://github.com/zhuj/react-js-diagrams/commit/16a90aef5db46371fc55fae5e29c2ca1dc967ec4
It will make the zooming more smoothly (it won't matter how you like to scroll the wheel - zoom will be linear) and current mouse position-centered (nodes will be exposed/collapsed over the current mouse position).
Any thoughts?