onMountedかonActivatedのどちらかが呼ばれた時に実行されるコンポーザブルを定義 (#1890)

* onMountedかonActivatedのどちらかが呼ばれた時に実行されるコンポーザブルを定義

* useOnRenderingにしてみた

* 名称を変更

* 条件式が違ってただけだった

* ニ通りの書き方で実装してみた

* ややこしいので１つにした

* 問題はここではなかったかも

* 不要なの

src/components/Sing/ScoreSequencer.vue

@@ -138,7 +138,6 @@
         marginRight: `${scrollBarWidth}px`,
         marginBottom: `${scrollBarWidth}px`,
       }"
-      :is-activated="isActivated"
       :offset-x="scrollX"
       :offset-y="scrollY"
     />
@@ -262,8 +261,6 @@ import { useShiftKey } from "@/composables/useModifierKey";
 
 type PreviewMode = "ADD" | "MOVE" | "RESIZE_RIGHT" | "RESIZE_LEFT";
 
-defineProps<{ isActivated: boolean }>();
-
 // 直接イベントが来ているかどうか
 const isSelfEventTarget = (event: UIEvent) => {
   return event.target === event.currentTarget;

src/components/Sing/SequencerPitch.vue

@@ -3,13 +3,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, toRaw, computed, onUnmounted, onMounted } from "vue";
+import { ref, watch, toRaw, computed } from "vue";
 import * as PIXI from "pixi.js";
 import { useStore } from "@/store";
 import { frequencyToNoteNumber, secondToTick } from "@/sing/domain";
 import { noteNumberToBaseY, tickToBaseX } from "@/sing/viewHelper";
 import { LineStrip } from "@/sing/graphics/lineStrip";
 import { FramePhoneme } from "@/openapi";
+import {
+  onMountedOrActivated,
+  onUnmountedOrDeactivated,
+} from "@/composables/onMountOrActivate";
 
 type VoicedSection = {
   readonly startFrame: number;
@@ -26,8 +30,7 @@ type PitchLine = {
 const pitchLineColor = [0.647, 0.831, 0.678, 1]; // RGBA
 const pitchLineWidth = 1.5;
 
-const props =
-  defineProps<{ isActivated: boolean; offsetX: number; offsetY: number }>();
+const props = defineProps<{ offsetX: number; offsetY: number }>();
 
 const store = useStore();
 const queries = computed(() => {
@@ -79,10 +82,10 @@ const render = () => {
   if (canvasHeight == undefined) {
     throw new Error("canvasHeight is undefined.");
   }
-  if (!renderer) {
+  if (renderer == undefined) {
     throw new Error("renderer is undefined.");
   }
-  if (!stage) {
+  if (stage == undefined) {
     throw new Error("stage is undefined.");
   }
 
@@ -205,9 +208,7 @@ watch(
   }
 );
 
-let isInstantiated = false;
-
-const initialize = () => {
+onMountedOrActivated(() => {
   const canvasContainerElement = canvasContainer.value;
   if (!canvasContainerElement) {
     throw new Error("canvasContainerElement is null.");
@@ -253,11 +254,9 @@ const initialize = () => {
     }
   });
   resizeObserver.observe(canvasContainerElement);
+});
 
-  isInstantiated = true;
-};
-
-const cleanUp = () => {
+onUnmountedOrDeactivated(() => {
   if (requestId != undefined) {
     window.cancelAnimationFrame(requestId);
   }
@@ -270,38 +269,6 @@ const cleanUp = () => {
   pitchLinesMap.clear();
   renderer?.destroy(true);
   resizeObserver?.disconnect();
-
-  isInstantiated = false;
-};
-
-let isMounted = false;
-
-onMounted(() => {
-  isMounted = true;
-  if (props.isActivated) {
-    initialize();
-  }
-});
-
-watch(
-  () => props.isActivated,
-  (isActivated) => {
-    if (!isMounted) {
-      return;
-    }
-    if (isActivated && !isInstantiated) {
-      initialize();
-    }
-    if (!isActivated && isInstantiated) {
-      cleanUp();
-    }
-  }
-);
-
-onUnmounted(() => {
-  if (isInstantiated) {
-    cleanUp();
-  }
 });
 </script>
 

src/components/Sing/SingEditor.vue

@@ -22,12 +22,12 @@
         />
       </div>
     </div>
-    <ScoreSequencer :is-activated="isActivated" />
+    <ScoreSequencer />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onActivated, onDeactivated, ref } from "vue";
+import { computed, ref } from "vue";
 import MenuBar from "./MenuBar.vue";
 import ToolBar from "./ToolBar.vue";
 import ScoreSequencer from "./ScoreSequencer.vue";
@@ -109,16 +109,6 @@ onetimeWatch(
     immediate: true,
   }
 );
-
-const isActivated = ref(false);
-
-onActivated(() => {
-  isActivated.value = true;
-});
-
-onDeactivated(() => {
-  isActivated.value = false;
-});
 </script>
 
 <style scoped lang="scss">

src/composables/onMountOrActivate.ts

@@ -0,0 +1,51 @@
+import { onMounted, onActivated, onDeactivated, onUnmounted } from "vue";
+
+/**
+ * onMountedかonActivatedのどちらかが呼ばれた時に実行される関数を登録する。
+ *
+ * NOTE:
+ * 大抵の場合はonMountedのあとにonActivatedが必ず呼ばれるが、
+ * KeepAliveでonActivatedが呼ばれるべきタイミングを過ぎた後、
+ * v-ifなどで切り替わるとonMountedのみが呼ばれる場合がある。
+ * このケースに対応している。
+ */
+export const onMountedOrActivated = (hook: () => void) => {
+  let shouldCall = true;
+
+  const start = () => {
+    if (shouldCall) {
+      hook();
+      shouldCall = false;
+    }
+  };
+  onMounted(start);
+  onActivated(start);
+
+  const stop = () => {
+    shouldCall = true;
+  };
+  onDeactivated(stop);
+  onUnmounted(stop);
+};
+
+/**
+ * onUnmountedかonDeactivatedのどちらかが呼ばれた時に実行される関数を登録する。
+ */
+export const onUnmountedOrDeactivated = (hook: () => void) => {
+  let shouldCall = false;
+
+  const start = () => {
+    shouldCall = true;
+  };
+  onMounted(start);
+  onActivated(start);
+
+  const stop = () => {
+    if (shouldCall) {
+      hook();
+      shouldCall = false;
+    }
+  };
+  onUnmounted(stop);
+  onDeactivated(stop);
+};