X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/4f5fdd49c0c9866fbb613c6c82641d686b0b8ad5..7f137c5a4162717b74668a513b8b10a1ed3d8577:/src/lib/cwl-svg/plugins/zoom/zoom.ts?ds=sidebyside

diff --git a/src/lib/cwl-svg/plugins/zoom/zoom.ts b/src/lib/cwl-svg/plugins/zoom/zoom.ts
new file mode 100644
index 00000000..1fc7f027
--- /dev/null
+++ b/src/lib/cwl-svg/plugins/zoom/zoom.ts
@@ -0,0 +1,48 @@
+import {Workflow}   from "../..";
+import {PluginBase} from "../plugin-base";
+
+export class ZoomPlugin extends PluginBase {
+    private svg: SVGSVGElement;
+    private dispose: Function | undefined;
+
+    registerWorkflow(workflow: Workflow): void {
+        super.registerWorkflow(workflow);
+        this.svg = workflow.svgRoot;
+
+        this.dispose = this.attachWheelListener();
+    }
+
+    attachWheelListener(): () => void {
+        const handler = this.onMouseWheel.bind(this);
+        this.svg.addEventListener("mousewheel", handler, true);
+        return () => this.svg.removeEventListener("mousewheel", handler, true);
+    }
+
+    onMouseWheel(event: MouseWheelEvent) {
+
+        const scale       = this.workflow.scale;
+        const scaleUpdate = scale - event.deltaY / 500;
+
+        const zoominOut = scaleUpdate < scale;
+        const zoomingIn = scaleUpdate > scale;
+
+        if (zoomingIn && this.workflow.maxScale < scaleUpdate) {
+            return;
+        }
+
+        if (zoominOut && this.workflow.minScale > scaleUpdate) {
+            return;
+        }
+
+        this.workflow.scaleAtPoint(scaleUpdate, event.clientX, event.clientY);
+        event.stopPropagation();
+    }
+
+    destroy(): void {
+        if (typeof this.dispose === "function") {
+            this.dispose();
+        }
+
+        this.dispose = undefined;
+    }
+}