SequencerStateIdを追加し、状態変更時にコールバックを呼び出すようにする

src/composables/useSequencerStateMachine.ts

@@ -5,6 +5,7 @@ import {
   IdleStateId,
   PartialStore,
   Refs,
+  SequencerStateId,
 } from "@/sing/sequencerStateMachine/common";
 import { getNoteDuration } from "@/sing/domain";
 import { createSequencerStateMachine } from "@/sing/sequencerStateMachine";
@@ -38,17 +39,22 @@ export const useSequencerStateMachine = (
     guideLineTicks: ref(0),
   };
 
+  const currentStateId = ref<SequencerStateId>(initialStateId);
   const stateMachine = createSequencerStateMachine(
     {
       ...computedRefs,
       ...refs,
       store,
     },
     initialStateId,
+    (stateId: SequencerStateId) => {
+      currentStateId.value = stateId;
+    },
   );
 
   return {
     stateMachine,
+    currentStateId: computed(() => currentStateId.value),
     nowPreviewing: computed(() => refs.nowPreviewing.value),
     previewNotes: computed(() => refs.previewNotes.value),
     previewRectForRectSelect: computed(

src/sing/sequencerStateMachine/common.ts

@@ -1,5 +1,5 @@
 import { ComputedRef, Ref } from "vue";
-import { StateDefinitions } from "@/sing/stateMachine";
+import { StateDefinitions, StateId } from "@/sing/stateMachine";
 import { Rect } from "@/sing/utility";
 import { CursorState, PREVIEW_SOUND_DURATION } from "@/sing/viewHelper";
 import { Store } from "@/store";
@@ -185,6 +185,8 @@ export type SequencerStateDefinitions = StateDefinitions<
   ]
 >;
 
+export type SequencerStateId = StateId<SequencerStateDefinitions>;
+
 /**
  * カーソル位置に対応する補助線の位置を取得する。
  */

src/sing/sequencerStateMachine/index.ts

@@ -3,6 +3,7 @@ import {
   IdleStateId,
   Input,
   SequencerStateDefinitions,
+  SequencerStateId,
 } from "@/sing/sequencerStateMachine/common";
 import { StateMachine } from "@/sing/stateMachine";
 
@@ -21,6 +22,7 @@ import { ErasePitchState } from "@/sing/sequencerStateMachine/states/erasePitchS
 export const createSequencerStateMachine = (
   context: Context,
   initialStateId: IdleStateId,
+  onStateChanged: (stateId: SequencerStateId) => void,
 ) => {
   return new StateMachine<SequencerStateDefinitions, Input, Context>(
     {
@@ -38,5 +40,6 @@ export const createSequencerStateMachine = (
     },
     context,
     initialStateId,
+    onStateChanged,
   );
 };

src/sing/stateMachine.ts

@@ -24,7 +24,7 @@ export type StateDefinitions<T extends StateDefinition[]> = T;
 /**
  * ステートのIDを表す型。
  */
-type StateId<T extends StateDefinition[]> = T[number]["id"];
+export type StateId<T extends StateDefinition[]> = T[number]["id"];
 
 /**
  * ファクトリ関数の引数を表す型。
@@ -119,6 +119,9 @@ export class StateMachine<
   >;
   private readonly context: Context;
 
+  // NOTE: EventTargetを継承する形だと型指定が面倒なので、ひとまずコールバックの形にしている
+  private readonly onStateChanged: (stateId: StateId<StateDefinitions>) => void;
+
   private currentState: State<StateDefinitions, Input, Context>;
   private isDisposed = false;
 
@@ -138,9 +141,11 @@ export class StateMachine<
     stateFactories: StateFactories<StateDefinitions, Input, Context>,
     context: Context,
     initialStateId: InitialStateId<StateDefinitions>,
+    onStateChanged: (stateId: StateId<StateDefinitions>) => void,
   ) {
     this.stateFactories = stateFactories;
     this.context = context;
+    this.onStateChanged = onStateChanged;
 
     this.currentState = stateFactories[initialStateId](undefined);
   }
@@ -161,6 +166,8 @@ export class StateMachine<
     this.currentState.onExit(this.context);
     this.currentState = this.stateFactories[id](factoryArgs);
     this.currentState.onEnter(this.context);
+
+    this.onStateChanged(this.currentState.id);
   }
 
   /**
@@ -188,6 +195,8 @@ export class StateMachine<
       this.currentState.onExit(this.context);
       this.currentState = nextState;
       this.currentState.onEnter(this.context);
+
+      this.onStateChanged(this.currentState.id);
     }
   }