fix event listener registration & unregistration (f52f7b40) · Commits · Marius DAVID / Canvas

packages/lib/src/renderer/PanZoom.ts

+243 −140

Original line number	Diff line number	Diff line
		@@ -261,9 +261,48 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
		}

		registerTouchEvents() {
		console.debug("[PanZoom] Registering touch events to $wrapper");

		this.$wrapper.addEventListener(
		"touchstart",
		this._touch_touchstart.bind(this),
		{
		passive: false,
		}
		);

		this.$wrapper.addEventListener(
		"touchmove",
		this._touch_touchmove.bind(this)
		);

		this.$wrapper.addEventListener("touchend", this._touch_touchend.bind(this));
		}

		unregisterTouchEvents() {
		console.debug("[PanZoom] Unregistering touch events to $wrapper");

		this.$wrapper.removeEventListener(
		"touchstart",
		(event) => {
		this._touch_touchstart.bind(this)
		);
		this.$wrapper.removeEventListener(
		"touchmove",
		this._touch_touchmove.bind(this)
		);
		this.$wrapper.removeEventListener(
		"touchend",
		this._touch_touchend.bind(this)
		);
		}

		/**
		* Handle touchstart event from touch registrations
		* This needs to be a variable to correctly pass this context
		*
		* @param e
		*/
		private _touch_touchstart = (event: TouchEvent) => {
		const isDoubleTap =
		this.touch.lastTouch && +new Date() - this.touch.lastTouch < 200;

		@@ -284,11 +323,15 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
		this.onPinchStart(event);
		}
		}
		},
		{ passive: false }
		);
		};

		this.$wrapper.addEventListener("touchmove", (event) => {
		/**
		* Handle touchmove event from touch registrations
		* This needs to be a variable to correctly pass this context
		*
		* @param e
		*/
		private _touch_touchmove = (event: TouchEvent) => {
		if (this.panning.enabled && event.touches.length === 1) {
		event.preventDefault();
		event.stopPropagation();
		@@ -299,9 +342,15 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
		} else if (event.touches.length > 1) {
		this.onPinch(event);
		}
		});
		};

		this.$wrapper.addEventListener("touchend", (event) => {
		/**
		* Handle touchend event from touch registrations
		* This needs to be a variable to correctly pass this context
		*
		* @param e
		*/
		private _touch_touchend = (event: TouchEvent) => {
		if (this.panning.enabled) {
		this.panning.enabled = false;

		@@ -309,8 +358,7 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {

		this.panning.end(touch.clientX, touch.clientY);
		}
		});
		}
		};

		/// /////
		// pinch
		@@ -396,10 +444,49 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
		}

		registerMouseEvents() {
		console.debug("[PanZoom] Registering mouse events to $wrapper & document");

		// zoom
		this.$wrapper.addEventListener(
		"wheel",
		(e) => {
		this.$wrapper.addEventListener("wheel", this._mouse_wheel, {
		passive: true,
		});

		this.$wrapper.addEventListener("mousedown", this._mouse_mousedown, {
		passive: false,
		});

		// mouse move should not be tied to the element, in case the mouse exits the window
		document.addEventListener("mousemove", this._mouse_mousemove, {
		passive: false,
		});

		// mouse up should not be tied to the element, in case the mouse releases outside of the window
		document.addEventListener("mouseup", this._mouse_mouseup, {
		passive: false,
		});
		}

		unregisterMouseEvents() {
		console.debug(
		"[PanZoom] Unregistering mouse events to $wrapper & document"
		);

		this.$wrapper.removeEventListener("wheel", this._mouse_wheel);

		this.$wrapper.removeEventListener("mousedown", this._mouse_mousedown);

		document.removeEventListener("mousemove", this._mouse_mousemove);

		document.removeEventListener("mouseup", this._mouse_mouseup);
		}

		/**
		* Handle the wheel event from the mouse event registration
		* This needs to be a variable to correctly pass this context
		*
		* @param e
		*/
		private _mouse_wheel = (e: WheelEvent) => {
		// if (!self.allowDrag) return;
		const oldScale = this.transform.scale;

		@@ -433,27 +520,30 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
		this.update();
		// place.update();
		}
		},
		{ passive: true }
		);
		};

		this.$wrapper.addEventListener(
		"mousedown",
		(e) => {
		/**
		* Handle mousedown event from mouse registrations
		* This needs to be a variable to correctly pass this context
		*
		* @param e
		*/
		private _mouse_mousedown = (e: MouseEvent) => {
		e.preventDefault();
		e.stopPropagation();

		this.mouse.mouseDown = Date.now();

		this.panning.start(e.clientX, e.clientY);
		},
		{ passive: false }
		);
		};

		// mouse move should not be tied to the element, in case the mouse exits the window
		document.addEventListener(
		"mousemove",
		(e) => {
		/**
		* Handle mousemove event from mouse registrations
		* This needs to be a variable to correctly pass this context
		*
		* @param e
		*/
		private _mouse_mousemove = (e: MouseEvent) => {
		if (this.panning.enabled) {
		e.preventDefault();
		e.stopPropagation();
		@@ -466,14 +556,27 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
		clientY: e.clientY,
		});
		}
		},
		{ passive: false }
		);
		if (this.panning.enabled) {
		e.preventDefault();
		e.stopPropagation();

		// mouse up should not be tied to the element, in case the mouse releases outside of the window
		document.addEventListener(
		"mouseup",
		(e) => {
		this.panning.move(e.clientX, e.clientY);
		} else {
		// not panning
		this.emit("hover", {
		clientX: e.clientX,
		clientY: e.clientY,
		});
		}
		};

		/**
		* Handle mouseup event from mouse registrations
		* This needs to be a variable to correctly pass this context
		*
		* @param e
		*/
		private _mouse_mouseup = (e: MouseEvent) => {
		if (this.mouse.mouseDown && Date.now() - this.mouse.mouseDown <= 500) {
		// if the mouse was down for less than a half a second, it's a click
		// this can't depend on this.panning.enabled because that'll always be true when mouse is down
		@@ -500,10 +603,7 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {

		this.panning.end(e.clientX, e.clientY);
		}
		},
		{ passive: false }
		);
		}
		};

		/**
		* Update viewport scale and position
		@@ -545,6 +645,9 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {

		cleanup() {
		// remove event handlers

		this.unregisterTouchEvents();
		this.unregisterMouseEvents();
		}

		// utilities