1st simple implementation for the zoom on mouse wheel

process-analytics · Oct 12, 2020 · 650e3b2 · 650e3b2
1 parent a1d64d5
commit 650e3b2
Showing 1 changed file with 16 additions and 56 deletions.
diff --git a/src/component/BpmnVisualization.ts b/src/component/BpmnVisualization.ts
@@ -57,68 +57,28 @@ export default class BpmnVisualization {
       return;
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    // const self = this; // TODO replace with arrow function to access to this directly
-    mxEvent.addMouseWheelListener(function (event: Event, up: boolean) {
+    mxEvent.addMouseWheelListener((event: Event, up: boolean) => {
       // TODO review type: this hack is due to the introduction of mxgraph-type-definitions
       const evt = (event as unknown) as MouseEvent;
-      const mxMouseEvent = (evt as unknown) as mxMouseEvent;
-      if (!mxEvent.isConsumed(mxMouseEvent)) {
-        // only the ctrl key or the meta key on mac
-        const isZoomWheelEvent = (evt.ctrlKey || (mxClient.IS_MAC && evt.metaKey)) && !evt.altKey && !evt.shiftKey;
-
-        if (isZoomWheelEvent) {
-          // eslint-disable-next-line no-console
-          console.info('[MouseWheelListener] zooming');
-          // TODO pass the point coordinate to use as center
-          const cursorPosition = new mxPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt));
-          // TODO we could have an option to ignoreCursorPosition
-          // eslint-disable-next-line no-console
-          console.info('[MouseWheelListener] cursor position', cursorPosition);
-          //self.zoom(up ? ZoomType.In : ZoomType.Out);
-          mxEvent.consume(evt);
-
-          // console.info('[MouseWheelListener] after zoom - scrolling to cursorPosition');
-          // // https://github.com/jgraph/drawio/blob/051eed36389f5bebe487663097f340e59940d87a/src/main/webapp/js/mxgraph/EditorUi.js#L2216
-          // // const sp = new mxPoint(self.graph.container.scrollLeft, self.graph.container.scrollTop);
-          // const offset = mxUtils.getOffset(self.graph.container);
-          // console.info('[MouseWheelListener] after zoom - offset', offset);
-          // // const prev = self.graph.view.scale;
-          // let dx = 0;
-          // let dy = 0;
-          //
-          // dx = self.graph.container.offsetWidth / 2 - cursorPosition.x + offset.x;
-          // dy = self.graph.container.offsetHeight / 2 - cursorPosition.y + offset.y;
-          // console.info('[MouseWheelListener] after zoom - dx', dx);
-          // console.info('[MouseWheelListener] after zoom - dy', dy);
-          //
-          // self.graph.container.scrollLeft -= dx;
-          // self.graph.container.scrollTop -= dy;
-          // console.info('[MouseWheelListener] after zoom - scrolling done');
-        }
-        // shift only
-        const isPanningHorizontalWheelEvent = evt.shiftKey && !evt.altKey && !evt.ctrlKey && !evt.metaKey;
-        // no key
-        const isPanningVerticalWheelEvent = !evt.altKey && !evt.shiftKey && !evt.ctrlKey && !evt.metaKey;
-
-        if (isPanningHorizontalWheelEvent || isPanningVerticalWheelEvent) {
-          //let panType: PanType;
-          if (isPanningHorizontalWheelEvent) {
-            // eslint-disable-next-line no-console
-            console.info('[MouseWheelListener] panning horizontal');
-          } else {
-            // eslint-disable-next-line no-console
-            console.info('[MouseWheelListener] panning vertical');
-          }
-          mxEvent.consume(evt);
-        }
+      if (mxEvent.isConsumed((evt as unknown) as mxMouseEvent)) {
+        return;
+      }
+      // only the ctrl key or the meta key on mac
+      const isZoomWheelEvent = (evt.ctrlKey || (mxClient.IS_MAC && evt.metaKey)) && !evt.altKey && !evt.shiftKey;
+      if (isZoomWheelEvent) {
+        this.zoom(up);
+        mxEvent.consume(evt);
       }
     }, this.container);
   }
 
-  // private onMouseWheel(): void {
-  //
-  // }
+  private zoom(zoomIn: boolean): void {
+    if (zoomIn) {
+      this.graph.zoomIn();
+    } else {
+      this.graph.zoomOut();
+    }
+  }
 }
 
 export interface BpmnVisualizationOptions {