Merge pull request #241 from MasatoMakino/refactor-toggle-event-listener

refactor : toggleEventListener
MasatoMakino · Mar 14, 2024 · b598c66 · b598c66
2 parents e1d9af0 + 9199e2c
commit b598c66
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 37 deletions.
diff --git a/src/SliderView.ts b/src/SliderView.ts
@@ -6,6 +6,7 @@ import {
   EventEmitter,
 } from "pixi.js";
 import {
+  ScrollBarViewUtil,
   SliderEventContext,
   SliderEventTypes,
   SliderViewOption,
@@ -111,11 +112,11 @@ export class SliderView extends Container {
     const localPos = this.toLocal(e.global);
     this.dragStartPos.set(localPos.x - target.x, localPos.y - target.y);
 
-    if (this.buttonRootContainer instanceof HTMLCanvasElement) {
-      this.buttonRootContainer.addEventListener("pointermove", this.moveSlider);
-    } else {
-      this.buttonRootContainer.on("pointermove", this.moveSlider);
-    }
+    SliderViewUtil.addEventListenerToTarget(
+      this.buttonRootContainer,
+      "pointermove",
+      this.moveSlider,
+    );
 
     this._slideButton.on("pointerup", this.moveSliderFinish);
     this._slideButton.on("pointerupoutside", this.moveSliderFinish);
@@ -185,14 +186,12 @@ export class SliderView extends Container {
    */
   private moveSliderFinish = () => {
     this.isDragging = false;
-    if (this.buttonRootContainer instanceof HTMLCanvasElement) {
-      this.buttonRootContainer.removeEventListener(
-        "pointermove",
-        this.moveSlider,
-      );
-    } else {
-      this.buttonRootContainer.off("pointermove", this.moveSlider);
-    }
+
+    SliderViewUtil.removeEventListenerFromTarget(
+      this.buttonRootContainer,
+      "pointermove",
+      this.moveSlider,
+    );
 
     this._slideButton.off("pointerup", this.moveSliderFinish);
     this._slideButton.off("pointerupoutside", this.moveSliderFinish);

diff --git a/src/SliderViewUtil.ts b/src/SliderViewUtil.ts
@@ -4,6 +4,8 @@ import {
   Rectangle,
   Container,
   Bounds,
+  EventEmitter,
+  ContainerEvents,
 } from "pixi.js";
 import { SliderView } from "./index.js";
 
@@ -161,4 +163,44 @@ export class SliderViewUtil {
       return localPos.y - dragStartPos.y;
     }
   }
+
+  /**
+   * リスナー関数を切り替える。
+   *
+   * @param shouldAdd リスナーを有効にするか否か
+   * @param target ターゲットオブジェクト
+   * @param event イベント名
+   * @param listener リスナー関数
+   * @returns
+   */
+  static toggleEventListener(
+    shouldAdd: boolean,
+    target: Container | HTMLCanvasElement,
+    event: keyof ContainerEvents,
+    listener: EventEmitter.ListenerFn,
+  ): void {
+    if (target instanceof HTMLCanvasElement) {
+      const method = shouldAdd ? "addEventListener" : "removeEventListener";
+      target[method](event as string, listener);
+      return;
+    }
+    const pixiMethod = shouldAdd ? "on" : "off";
+    target[pixiMethod](event, listener);
+  }
+
+  static addEventListenerToTarget(
+    target: Container | HTMLCanvasElement,
+    event: keyof ContainerEvents,
+    listener: EventEmitter.ListenerFn,
+  ) {
+    this.toggleEventListener(true, target, event, listener);
+  }
+
+  static removeEventListenerFromTarget(
+    target: Container | HTMLCanvasElement,
+    event: keyof ContainerEvents,
+    listener: EventEmitter.ListenerFn,
+  ) {
+    this.toggleEventListener(false, target, event, listener);
+  }
 }
diff --git a/src/scrollBar/InertialScrollManager.ts b/src/scrollBar/InertialScrollManager.ts
@@ -83,32 +83,13 @@ export class InertialScrollManager extends EventEmitter<ScrollBarEventTypes> {
     this.switchDragListener(false);
   }
 
-  private switchDragListener(isOn: boolean): void {
+  private switchDragListener(shouldAdd: boolean): void {
     const target = this.scrollBarView.contents.target;
     const dragTarget = this.scrollBarView.canvas ?? target;
-    const switchListener = (
-      isOn: boolean,
-      dragTarget: Container | HTMLCanvasElement,
-      event: keyof ContainerEvents,
-      listener: EventEmitter.ListenerFn,
-    ) => {
-      if (dragTarget instanceof HTMLCanvasElement) {
-        if (isOn) {
-          dragTarget.addEventListener(event as string, listener);
-        } else {
-          dragTarget.removeEventListener(event as string, listener);
-        }
-      } else {
-        if (isOn) {
-          dragTarget.on(event, listener);
-        } else {
-          dragTarget.off(event, listener);
-        }
-      }
-    };
-    switchListener(isOn, dragTarget, "pointermove", this.onMouseMove);
-    switchListener(isOn, target, "pointerup", this.onMouseUp);
-    switchListener(isOn, target, "pointerupoutside", this.onMouseUp);
+    const switchListener = SliderViewUtil.toggleEventListener;
+    switchListener(shouldAdd, dragTarget, "pointermove", this.onMouseMove);
+    switchListener(shouldAdd, target, "pointerup", this.onMouseUp);
+    switchListener(shouldAdd, target, "pointerupoutside", this.onMouseUp);
   }
 
   private getDragPos(e: PointerEvent): number {