Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve zooming issue #9

Open
zhuj opened this issue Jul 17, 2017 · 0 comments
Open

Improve zooming issue #9

zhuj opened this issue Jul 17, 2017 · 0 comments

Comments

@zhuj
Copy link

zhuj commented Jul 17, 2017

Currently, zoom (mouse wheel) has several problems:

  • it scales the whole image from the left-top point (visually it results in all nodes movements that direction according to the level of the zoom);
  • zoom is not linear (zooming 2 times consequently on a single «wheel move» gives a different result from zooming single time with twice «wheel move»).

The core responsible for that is in 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 - zhuj@16a90ae

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant