src/lib/cwl-svg/plugins/zoom/zoom.ts

   1 import {Workflow}   from "../..";
   2 import {PluginBase} from "../plugin-base";
   3
   4 export class ZoomPlugin extends PluginBase {
   5     private svg: SVGSVGElement;
   6     private dispose: Function | undefined;
   7
   8     registerWorkflow(workflow: Workflow): void {
   9         super.registerWorkflow(workflow);
  10         this.svg = workflow.svgRoot;
  11
  12         this.dispose = this.attachWheelListener();
  13     }
  14
  15     attachWheelListener(): () => void {
  16         const handler = this.onMouseWheel.bind(this);
  17         this.svg.addEventListener("mousewheel", handler, true);
  18         return () => this.svg.removeEventListener("mousewheel", handler, true);
  19     }
  20
  21     onMouseWheel(event: MouseWheelEvent) {
  22
  23         const scale       = this.workflow.scale;
  24         const scaleUpdate = scale - event.deltaY / 500;
  25
  26         const zoominOut = scaleUpdate < scale;
  27         const zoomingIn = scaleUpdate > scale;
  28
  29         if (zoomingIn && this.workflow.maxScale < scaleUpdate) {
  30             return;
  31         }
  32
  33         if (zoominOut && this.workflow.minScale > scaleUpdate) {
  34             return;
  35         }
  36
  37         this.workflow.scaleAtPoint(scaleUpdate, event.clientX, event.clientY);
  38         event.stopPropagation();
  39     }
  40
  41     destroy(): void {
  42         if (typeof this.dispose === "function") {
  43             this.dispose();
  44         }
  45
  46         this.dispose = undefined;
  47     }
  48 }