From 7b72a50e42ef69a384231f3d33e0f4e5012e6411 Mon Sep 17 00:00:00 2001
From: Hiroshiba <hihokaruta@gmail.com>
Date: Wed, 27 Mar 2024 14:26:34 +0900
Subject: [PATCH] =?UTF-8?q?onMounted=E3=81=8BonActivated=E3=81=AE=E3=81=A9?=
 =?UTF-8?q?=E3=81=A1=E3=82=89=E3=81=8B=E3=81=8C=E5=91=BC=E3=81=B0=E3=82=8C?=
 =?UTF-8?q?=E3=81=9F=E6=99=82=E3=81=AB=E5=AE=9F=E8=A1=8C=E3=81=95=E3=82=8C?=
 =?UTF-8?q?=E3=82=8B=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=82=B6=E3=83=96?=
 =?UTF-8?q?=E3=83=AB=E3=82=92=E5=AE=9A=E7=BE=A9=20(#1890)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* useOnRenderingにしてみた

* 名称を変更

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

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

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

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

* 不要なの
---
 src/components/Sing/ScoreSequencer.vue |  3 --
 src/components/Sing/SequencerPitch.vue | 55 ++++++--------------------
 src/components/Sing/SingEditor.vue     | 14 +------
 src/composables/onMountOrActivate.ts   | 51 ++++++++++++++++++++++++
 4 files changed, 64 insertions(+), 59 deletions(-)
 create mode 100644 src/composables/onMountOrActivate.ts

diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
index 946549275f..78972613dc 100644
--- a/src/components/Sing/ScoreSequencer.vue
+++ b/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;
diff --git a/src/components/Sing/SequencerPitch.vue b/src/components/Sing/SequencerPitch.vue
index a28c72bc44..71cb64d3cf 100644
--- a/src/components/Sing/SequencerPitch.vue
+++ b/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>
 
diff --git a/src/components/Sing/SingEditor.vue b/src/components/Sing/SingEditor.vue
index ac7b35267c..d7f0af5ae2 100644
--- a/src/components/Sing/SingEditor.vue
+++ b/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">
diff --git a/src/composables/onMountOrActivate.ts b/src/composables/onMountOrActivate.ts
new file mode 100644
index 0000000000..75d57fda0b
--- /dev/null
+++ b/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);
+};