#147 移動処理の負担を軽減

Author: ienaga

src/js/controller/application/SoundArea/usecase/SoundAreaLoopCountPointerDownEventUseCase.test.ts

@@ -34,17 +34,20 @@ describe("SoundAreaLoopCountPointerDownEventUseCase Test", () =>
         });
 
         let stopPropagation = false;
+        let preventDefault = false;
         const mockEvent = {
             "pointerId": 100,
             "button": 0,
             "stopPropagation": vi.fn(() => { stopPropagation = true; }),
+            "preventDefault": vi.fn(() => { preventDefault = true; }),
             "currentTarget": input
         } as unknown as PointerEvent;
 
         soundArea.targetIndex = -1
         expect(soundArea.targetIndex).toBe(-1);
         expect(pointerId).toBe(0);
         expect(stopPropagation).toBe(false);
+        expect(preventDefault).toBe(false);
         expect(pointerMove).toBe(false);
         expect(pointerUp).toBe(false);
         expect(pointerCancel).toBe(false);
@@ -54,6 +57,7 @@ describe("SoundAreaLoopCountPointerDownEventUseCase Test", () =>
         expect(soundArea.targetIndex).toBe(0);
         expect(pointerId).toBe(100);
         expect(stopPropagation).toBe(true);
+        expect(preventDefault).toBe(true);
         expect(pointerMove).toBe(true);
         expect(pointerUp).toBe(true);
         expect(pointerCancel).toBe(true);

src/js/controller/application/SoundArea/usecase/SoundAreaLoopCountPointerDownEventUseCase.ts

@@ -3,7 +3,8 @@ import { execute as soundAreaLoopCountPointerMoveEventUseCase } from "./SoundAre
 import { execute as soundAreaLoopCountPointerUpEventUseCase } from "./SoundAreaLoopCountPointerUpEventUseCase";
 import { $useKeyboard } from "@/shortcut/ShortcutUtil";
 import { soundArea } from "@/controller/domain/model/SoundArea";
-import { $activeTouchPointers } from "@/global/GlobalUtil";
+import { $activeTouchPointers, $setEditingElement } from "@/global/GlobalUtil";
+import { $allHideMenu } from "@/menu/application/MenuUtil";
 
 /**
  * @description ループ回数操作のwindowイベントを登録
@@ -33,6 +34,15 @@ export const execute = (event: PointerEvent): void =>
         return ;
     }
 
+    // メニューを全て非表示にする
+    $allHideMenu();
+
+    // 編集中の要素を解除
+    $setEditingElement(null);
+
+    // fixed logic
+    event.preventDefault();
+
     // 対象のインデックスを設定
     soundArea.targetIndex = parseInt(element.dataset.index as string);
 

src/js/controller/application/SoundArea/usecase/SoundAreaLoopCountPointerMoveEventUseCase.ts

@@ -3,29 +3,41 @@ import {
     $setCursor
 } from "@/global/GlobalUtil";
 
+/**
+ * @description タイマーID
+ *              Timer ID
+ *
+ * @member {number}
+ * @default -1
+ * @private
+ */
+let $timerId: number = -1;
+
 /**
  * @description ループ回数操作を開始
  *              Start loop count operation
  *
- * @param {PointerEvent} event
+ * @param  {PointerEvent} event
  * @return {void}
  * @method
  * @public
  */
 export const execute = (event: PointerEvent): void =>
 {
+    // イベントの伝播を止める
+    event.stopPropagation();
+    event.preventDefault();
+
+    // カーソルを変更
     $setCursor("ew-resize");
 
     // マウスの移動量がない場合は処理を終了
     if (!event.movementX) {
         return ;
     }
 
-    // イベントの伝播を止める
-    event.stopPropagation();
-    event.preventDefault();
-
-    requestAnimationFrame((): void =>
+    cancelAnimationFrame($timerId);
+    $timerId = requestAnimationFrame((): void =>
     {
         const element = event.target as HTMLInputElement;
         if (!element) {

src/js/controller/application/SoundArea/usecase/SoundAreaVolumePointerDownEventUseCase.test.ts

@@ -34,17 +34,20 @@ describe("SoundAreaVolumePointerDownEventUseCase Test", () =>
         });
 
         let stopPropagation = false;
+        let preventDefault = false;
         const mockEvent = {
             "pointerId": 100,
             "button": 0,
             "stopPropagation": vi.fn(() => { stopPropagation = true; }),
+            "preventDefault": vi.fn(() => { preventDefault = true; }),
             "currentTarget": input
         } as unknown as PointerEvent;
 
         soundArea.targetIndex = -1
         expect(soundArea.targetIndex).toBe(-1);
         expect(pointerId).toBe(0);
         expect(stopPropagation).toBe(false);
+        expect(preventDefault).toBe(false);
         expect(pointerMove).toBe(false);
         expect(pointerUp).toBe(false);
         expect(pointerCancel).toBe(false);
@@ -54,6 +57,7 @@ describe("SoundAreaVolumePointerDownEventUseCase Test", () =>
         expect(soundArea.targetIndex).toBe(0);
         expect(pointerId).toBe(100);
         expect(stopPropagation).toBe(true);
+        expect(preventDefault).toBe(true);
         expect(pointerMove).toBe(true);
         expect(pointerUp).toBe(true);
         expect(pointerCancel).toBe(true);

src/js/controller/application/SoundArea/usecase/SoundAreaVolumePointerDownEventUseCase.ts

@@ -3,7 +3,8 @@ import { execute as soundAreaVolumePointerMoveEventUseCase } from "./SoundAreaVo
 import { execute as soundAreaVolumePointerUpEventUseCase } from "./SoundAreaVolumePointerUpEventUseCase";
 import { $useKeyboard } from "@/shortcut/ShortcutUtil";
 import { soundArea } from "@/controller/domain/model/SoundArea";
-import { $activeTouchPointers } from "@/global/GlobalUtil";
+import { $activeTouchPointers, $setEditingElement } from "@/global/GlobalUtil";
+import { $allHideMenu } from "@/menu/application/MenuUtil";
 
 /**
  * @description 音声操作のwindowイベントを登録
@@ -33,6 +34,15 @@ export const execute = (event: PointerEvent): void =>
         return ;
     }
 
+    // メニューを全て非表示にする
+    $allHideMenu();
+
+    // 編集中の要素を解除
+    $setEditingElement(null);
+
+    // fixed logic
+    event.preventDefault();
+
     // 対象のインデックスを設定
     soundArea.targetIndex = parseInt(element.dataset.index as string);
 

src/js/controller/application/SoundArea/usecase/SoundAreaVolumePointerMoveEventUseCase.ts

@@ -5,6 +5,16 @@ import {
     $setCursor
 } from "@/global/GlobalUtil";
 
+/**
+ * @description タイマーID
+ *              Timer ID
+ *
+ * @member {number}
+ * @default -1
+ * @private
+ */
+let $timerId: number = -1;
+
 /**
  * @description 音量操作を開始
  *              Start volume operation
@@ -16,17 +26,19 @@ import {
  */
 export const execute = (event: PointerEvent): void =>
 {
+    // イベントの伝播を止める
+    event.stopPropagation();
+    event.preventDefault();
+
+    // カーソルを変更
     $setCursor("ew-resize");
 
     if (!event.movementX) {
         return ;
     }
 
-    // イベントの伝播を止める
-    event.stopPropagation();
-    event.preventDefault();
-
-    requestAnimationFrame((): void =>
+    cancelAnimationFrame($timerId);
+    $timerId = requestAnimationFrame((): void =>
     {
         const element = event.target as HTMLInputElement;
         if (!element) {

src/js/controller/application/StageSetting/usecase/StageSettingFpsPointerMoveEventUseCase.ts

@@ -2,6 +2,16 @@ import { $STAGE_DEFAULT_FPS } from "@/config/StageSettingConfig";
 import { $setCursor } from "@/global/GlobalUtil";
 import { $getCurrentWorkSpace } from "@/core/application/CoreUtil";
 
+/**
+ * @description タイマーID
+ *              Timer ID
+ *
+ * @member {number}
+ * @default -1
+ * @private
+ */
+let $timerId: number = -1;
+
 /**
  * @description ステージのフレームレートの値操作のマウスムーブイベント
  *              Mouse move event for value operation of stage frame rate
@@ -24,7 +34,8 @@ export const execute = (event: PointerEvent): void =>
         return ;
     }
 
-    requestAnimationFrame((): void =>
+    cancelAnimationFrame($timerId);
+    $timerId = requestAnimationFrame((): void =>
     {
         const element = event.target as HTMLInputElement;
         if (!element) {

src/js/controller/application/StageSetting/usecase/StageSettingHeightPointerMoveEventUseCase.ts

@@ -6,6 +6,16 @@ import { execute as stageStyleUpdateSizeService } from "@/core/application/Stage
 import { execute as screenStageAreaUpdateSizeService } from "@/screen/application/ScreenStageArea/service/ScreenStageAreaUpdateSizeService";
 import { execute as screenScrollResizeService } from "@/screen/application/ScreenScroll/service/ScreenScrollResizeService";
 
+/**
+ * @description タイマーID
+ *              Timer ID
+ *
+ * @member {number}
+ * @default -1
+ * @private
+ */
+let $timerId: number = -1;
+
 /**
  * @description ステージ高さの値操作のマウスムーブイベント
  *              Mouse move event for value operation of stage height
@@ -17,18 +27,19 @@ import { execute as screenScrollResizeService } from "@/screen/application/Scree
  */
 export const execute = (event: PointerEvent): void =>
 {
-    if (!event.movementX) {
-        return ;
-    }
+    // イベントの伝播を止める
+    event.stopPropagation();
+    event.preventDefault();
 
     // カーソルを変更
     $setCursor("ew-resize");
 
-    // イベントの伝播を止める
-    event.stopPropagation();
-    event.preventDefault();
+    if (!event.movementX) {
+        return ;
+    }
 
-    requestAnimationFrame((): void =>
+    cancelAnimationFrame($timerId);
+    $timerId = requestAnimationFrame((): void =>
     {
         const element = event.target as HTMLInputElement;
         if (!element) {

src/js/controller/application/StageSetting/usecase/StageSettingWidthPointerDownEventUseCase.ts

@@ -3,13 +3,16 @@ import { execute as timelineToolPlayStopUseCase } from "@/timeline/application/T
 import { stageSetting } from "@/controller/domain/model/StageSetting";
 import { $useKeyboard } from "@/shortcut/ShortcutUtil";
 import { $STAGE_HEIGHT_ID } from "@/config/StageSettingConfig";
-import { $activeTouchPointers, $setEditingElement } from "@/global/GlobalUtil";
 import { timelineHeader } from "@/timeline/domain/model/TimelineHeader";
+import { $allHideMenu } from "@/menu/application/MenuUtil";
+import {
+    $activeTouchPointers,
+    $setEditingElement
+} from "@/global/GlobalUtil";
 import {
     $setBeforeHeight,
     $setBeforeWidth
 } from "../StagsSettingUtil";
-import { $allHideMenu } from "@/menu/application/MenuUtil";
 
 /**
  * @description ステージエリアの幅のマウスダウンイベントユースケース

src/js/controller/application/StageSetting/usecase/StageSettingWidthPointerMoveEventUseCase.ts

@@ -6,6 +6,16 @@ import { execute as stageStyleUpdateSizeService } from "@/core/application/Stage
 import { execute as screenStageAreaUpdateSizeService } from "@/screen/application/ScreenStageArea/service/ScreenStageAreaUpdateSizeService";
 import { execute as screenScrollResizeService } from "@/screen/application/ScreenScroll/service/ScreenScrollResizeService";
 
+/**
+ * @description タイマーID
+ *              Timer ID
+ *
+ * @member {number}
+ * @default -1
+ * @private
+ */
+let $timerId: number = -1;
+
 /**
  * @description ステージ幅の値操作のマウスムーブイベント
  *              Mouse move event for value operation of stage width
@@ -17,18 +27,19 @@ import { execute as screenScrollResizeService } from "@/screen/application/Scree
  */
 export const execute = (event: PointerEvent): void =>
 {
-    if (!event.movementX) {
-        return ;
-    }
-
     // イベントの伝播を止める
     event.stopPropagation();
     event.preventDefault();
 
     // カーソルを変更
     $setCursor("ew-resize");
 
-    requestAnimationFrame((): void =>
+    if (!event.movementX) {
+        return ;
+    }
+
+    cancelAnimationFrame($timerId);
+    $timerId = requestAnimationFrame((): void =>
     {
         const element = event.target as HTMLInputElement;
         if (!element) {