Improve zooming issue

[zhuj]

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 - 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?