From f6bdb13a3382ab447ce9443d253bc20d5dd23aeb Mon Sep 17 00:00:00 2001
From: Sig <62321214+sigprogramming@users.noreply.github.com>
Date: Sat, 1 Feb 2025 01:20:00 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20SequencerPitch=E3=82=92=E3=83=AA?=
 =?UTF-8?q?=E3=83=95=E3=82=A1=E3=82=AF=E3=82=BF=20(#2510)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
Co-authored-by: Hiroshiba Kazuyuki <kazuyuki_hiroshiba@dwango.co.jp>
---
 src/components/Sing/SequencerPitch.vue | 350 ++++++++-----------------
 src/sing/graphics/pitchLine.ts         | 143 ++++++++++
 src/sing/viewHelper.ts                 |  15 --
 3 files changed, 254 insertions(+), 254 deletions(-)
 create mode 100644 src/sing/graphics/pitchLine.ts

diff --git a/src/components/Sing/SequencerPitch.vue b/src/components/Sing/SequencerPitch.vue
index 7baa1fb5aa..abd3bde2e7 100644
--- a/src/components/Sing/SequencerPitch.vue
+++ b/src/components/Sing/SequencerPitch.vue
@@ -1,9 +1,11 @@
 <template>
-  <div ref="canvasContainer" class="canvas-container"></div>
+  <div ref="canvasContainer" class="canvas-container">
+    <canvas ref="canvas"></canvas>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, Ref } from "vue";
+import { ref, watch, computed } from "vue";
 import * as PIXI from "pixi.js";
 import AsyncLock from "async-lock";
 import { useStore } from "@/store";
@@ -14,14 +16,8 @@ import {
   frequencyToNoteNumber,
   secondToTick,
 } from "@/sing/domain";
-import {
-  PitchData,
-  PitchDataHash,
-  calculatePitchDataHash,
-  noteNumberToBaseY,
-  tickToBaseX,
-} from "@/sing/viewHelper";
-import { Color, LineStrip } from "@/sing/graphics/lineStrip";
+import { noteNumberToBaseY, tickToBaseX } from "@/sing/viewHelper";
+import { Color } from "@/sing/graphics/lineStrip";
 import {
   onMountedOrActivated,
   onUnmountedOrDeactivated,
@@ -31,13 +27,13 @@ import { createLogger } from "@/helpers/log";
 import { getLast } from "@/sing/utility";
 import { getOrThrow } from "@/helpers/mapHelper";
 import { EditorFrameAudioQuery } from "@/store/type";
-
-type PitchLine = {
-  color: Ref<Color>;
-  readonly width: number;
-  readonly pitchDataMap: Map<PitchDataHash, PitchData>;
-  readonly lineStripMap: Map<PitchDataHash, LineStrip>;
-};
+import {
+  calculatePitchDataHash,
+  PitchData,
+  PitchDataHash,
+  PitchLine,
+  ViewInfo,
+} from "@/sing/graphics/pitchLine";
 
 const props = defineProps<{
   offsetX: number;
@@ -81,30 +77,37 @@ const singingGuidesInSelectedTrack = computed(() => {
 
 // NOTE: ピッチラインの色をテーマに応じて調節する
 // 動的カラースキーマに対応後、テーマに応じた色をオブジェクトから取得できるようにする
+
 const originalPitchLineColorLight = new Color(156, 158, 156, 255);
 const originalPitchLineColorDark = new Color(114, 116, 114, 255);
-const originalPitchLineColor = ref(
-  isDark.value ? originalPitchLineColorDark : originalPitchLineColorLight,
-);
-const originalPitchLine: PitchLine = {
-  color: originalPitchLineColor,
-  width: 1.125,
-  pitchDataMap: new Map(),
-  lineStripMap: new Map(),
-};
 const pitchEditLineColorLight = new Color(0, 167, 63, 255);
 const pitchEditLineColorDark = new Color(95, 188, 117, 255);
-const pitchEditLineColor = ref(
-  isDark.value ? pitchEditLineColorDark : pitchEditLineColorLight,
+
+const originalPitchLineColor = computed(() => {
+  return isDark.value
+    ? originalPitchLineColorDark
+    : originalPitchLineColorLight;
+});
+const pitchEditLineColor = computed(() => {
+  return isDark.value ? pitchEditLineColorDark : pitchEditLineColorLight;
+});
+const isPitchLineVisible = computed(() => {
+  return store.getters.SELECTED_TRACK.singer != undefined;
+});
+
+const originalPitchLine = new PitchLine(
+  originalPitchLineColor.value,
+  1.125,
+  isPitchLineVisible.value,
+);
+const pitchEditLine = new PitchLine(
+  pitchEditLineColor.value,
+  2.25,
+  isPitchLineVisible.value,
 );
-const pitchEditLine: PitchLine = {
-  color: pitchEditLineColor,
-  width: 2.25,
-  pitchDataMap: new Map(),
-  lineStripMap: new Map(),
-};
 
 const canvasContainer = ref<HTMLElement | null>(null);
+const canvas = ref<HTMLCanvasElement | null>(null);
 let resizeObserver: ResizeObserver | undefined;
 let canvasWidth: number | undefined;
 let canvasHeight: number | undefined;
@@ -114,190 +117,72 @@ let stage: PIXI.Container | undefined;
 let requestId: number | undefined;
 let renderInNextFrame = false;
 
-const updateLineStrips = (pitchLine: PitchLine) => {
+const render = () => {
+  if (renderer == undefined) {
+    throw new Error("renderer is undefined.");
+  }
   if (stage == undefined) {
     throw new Error("stage is undefined.");
   }
   if (canvasWidth == undefined) {
     throw new Error("canvasWidth is undefined.");
   }
-  const tpqn = store.state.tpqn;
-  const canvasWidthValue = canvasWidth;
-  const zoomX = store.state.sequencerZoomX;
-  const zoomY = store.state.sequencerZoomY;
-  const offsetX = props.offsetX;
-  const offsetY = props.offsetY;
-
-  const removedLineStrips: LineStrip[] = [];
-
-  // 無くなったピッチデータを調べて、そのピッチデータに対応するLineStripを削除する
-  for (const [key, lineStrip] of pitchLine.lineStripMap) {
-    if (!pitchLine.pitchDataMap.has(key)) {
-      stage.removeChild(lineStrip.displayObject);
-      removedLineStrips.push(lineStrip);
-      pitchLine.lineStripMap.delete(key);
-    }
-  }
 
-  // ピッチデータに対応するLineStripが無かったら作成する
-  for (const [key, pitchData] of pitchLine.pitchDataMap) {
-    if (pitchLine.lineStripMap.has(key)) {
-      const currentLineStrip = pitchLine.lineStripMap.get(key)!;
-      // テーマなど色が変更された場合、LineStripを再作成する
-      if (!currentLineStrip.color.equals(pitchLine.color.value)) {
-        stage.removeChild(currentLineStrip.displayObject);
-        currentLineStrip.destroy();
-        pitchLine.lineStripMap.delete(key);
-      } else {
-        continue;
-      }
-    }
-    const dataLength = pitchData.data.length;
-
-    // 再利用できるLineStripがあれば再利用し、なければLineStripを作成する
-    let lineStrip = removedLineStrips.pop();
-    if (lineStrip != undefined) {
-      if (
-        !lineStrip.color.equals(pitchLine.color.value) ||
-        lineStrip.width !== pitchLine.width
-      ) {
-        throw new Error("Color or width does not match.");
-      }
-      lineStrip.numOfPoints = dataLength;
-    } else {
-      lineStrip = new LineStrip(
-        dataLength,
-        pitchLine.color.value,
-        pitchLine.width,
-      );
-    }
-    // pitchEditLineの場合は最後に追加する（originalより前面に表示）
-    if (pitchLine === pitchEditLine) {
-      stage.addChild(lineStrip.displayObject);
-    } else {
-      // originalLineは最初に追加する（EditLineの背面に表示）
-      stage.addChildAt(lineStrip.displayObject, 0);
-    }
-    pitchLine.lineStripMap.set(key, lineStrip);
-  }
-
-  // 再利用されなかったLineStripは破棄する
-  for (const lineStrip of removedLineStrips) {
-    lineStrip.destroy();
-  }
-
-  // LineStripを更新
-  for (const [key, pitchData] of pitchLine.pitchDataMap) {
-    const lineStrip = pitchLine.lineStripMap.get(key);
-    if (lineStrip == undefined) {
-      throw new Error("lineStrip is undefined.");
-    }
+  const viewInfo: ViewInfo = {
+    viewportWidth: canvasWidth,
+    zoomX: store.state.sequencerZoomX,
+    zoomY: store.state.sequencerZoomY,
+    offsetX: props.offsetX,
+    offsetY: props.offsetY,
+  };
 
-    // カリングを行う
-    const startTicks = pitchData.ticksArray[0];
-    const startBaseX = tickToBaseX(startTicks, tpqn);
-    const startX = startBaseX * zoomX - offsetX;
-    const lastTicks = getLast(pitchData.ticksArray);
-    const lastBaseX = tickToBaseX(lastTicks, tpqn);
-    const lastX = lastBaseX * zoomX - offsetX;
-    if (startX >= canvasWidthValue || lastX <= 0) {
-      lineStrip.renderable = false;
-      continue;
-    }
-    lineStrip.renderable = true;
-
-    // ポイントを計算してlineStripに設定＆更新
-    for (let i = 0; i < pitchData.data.length; i++) {
-      const ticks = pitchData.ticksArray[i];
-      const baseX = tickToBaseX(ticks, tpqn);
-      const x = baseX * zoomX - offsetX;
-      const freq = pitchData.data[i];
-      const noteNumber = frequencyToNoteNumber(freq);
-      const baseY = noteNumberToBaseY(noteNumber);
-      const y = baseY * zoomY - offsetY;
-      lineStrip.setPoint(i, x, y);
-    }
-    lineStrip.update();
-  }
-};
+  originalPitchLine.color = originalPitchLineColor.value;
+  pitchEditLine.color = pitchEditLineColor.value;
 
-const render = () => {
-  if (renderer == undefined) {
-    throw new Error("renderer is undefined.");
-  }
-  if (stage == undefined) {
-    throw new Error("stage is undefined.");
-  }
+  originalPitchLine.isVisible = isPitchLineVisible.value;
+  pitchEditLine.isVisible = isPitchLineVisible.value;
 
-  // シンガーが未設定の場合はピッチラインをすべて非表示にして終了
-  const singer = store.getters.SELECTED_TRACK.singer;
-  if (!singer) {
-    for (const lineStrip of originalPitchLine.lineStripMap.values()) {
-      lineStrip.renderable = false;
-    }
-    for (const lineStrip of pitchEditLine.lineStripMap.values()) {
-      lineStrip.renderable = false;
-    }
-    renderer.render(stage);
-    return;
-  }
-
-  // ピッチラインのLineStripを更新する
-  updateLineStrips(originalPitchLine);
-  updateLineStrips(pitchEditLine);
+  originalPitchLine.update(viewInfo);
+  pitchEditLine.update(viewInfo);
 
   renderer.render(stage);
 };
 
-const toPitchData = (framewiseData: number[], frameRate: number): PitchData => {
-  const data = framewiseData;
-  const ticksArray: number[] = [];
-  for (let i = 0; i < data.length; i++) {
-    const ticks = secondToTick(i / frameRate, tempos.value, tpqn.value);
-    ticksArray.push(ticks);
-  }
-  return { ticksArray, data };
-};
-
-const splitPitchData = (pitchData: PitchData, delimiter: number) => {
-  const ticksArray = pitchData.ticksArray;
-  const data = pitchData.data;
+const toPitchDataMap = async (framewiseData: number[], frameRate: number) => {
   const pitchDataArray: PitchData[] = [];
-  for (let i = 0; i < data.length; i++) {
-    if (data[i] !== delimiter) {
-      if (i === 0 || data[i - 1] === delimiter) {
-        pitchDataArray.push({ ticksArray: [], data: [] });
-      }
-      const lastPitchData = getLast(pitchDataArray);
-      lastPitchData.ticksArray.push(ticksArray[i]);
-      lastPitchData.data.push(data[i]);
+  for (let i = 0; i < framewiseData.length; i++) {
+    if (framewiseData[i] === VALUE_INDICATING_NO_DATA) {
+      continue;
     }
+    if (i === 0 || framewiseData[i - 1] === VALUE_INDICATING_NO_DATA) {
+      pitchDataArray.push([]);
+    }
+    const lastPitchData = getLast(pitchDataArray);
+    const seconds = i / frameRate;
+    const ticks = secondToTick(seconds, tempos.value, tpqn.value);
+    const baseX = tickToBaseX(ticks, tpqn.value);
+    const freq = framewiseData[i];
+    const noteNumber = frequencyToNoteNumber(freq);
+    const baseY = noteNumberToBaseY(noteNumber);
+    lastPitchData.push({ baseX, baseY });
   }
-  return pitchDataArray;
-};
-
-const setPitchDataToPitchLine = async (
-  pitchData: PitchData,
-  pitchLine: PitchLine,
-) => {
-  const partialPitchDataArray = splitPitchData(
-    pitchData,
-    VALUE_INDICATING_NO_DATA,
-  ).filter((value) => value.data.length >= 2);
-
-  pitchLine.pitchDataMap.clear();
-  for (const partialPitchData of partialPitchDataArray) {
-    const hash = await calculatePitchDataHash(partialPitchData);
-    pitchLine.pitchDataMap.set(hash, partialPitchData);
+  const pitchDataMap = new Map<PitchDataHash, PitchData>();
+  for (const pitchData of pitchDataArray) {
+    if (pitchData.length < 2) {
+      continue;
+    }
+    const hash = await calculatePitchDataHash(pitchData);
+    pitchDataMap.set(hash, pitchData);
   }
+  return pitchDataMap;
 };
 
-const generateOriginalPitchData = () => {
+const generateOriginalPitchDataMap = async () => {
   const unvoicedPhonemes = UNVOICED_PHONEMES;
   const frameRate = editorFrameRate.value; // f0（元のピッチ）はエディターのフレームレートで表示する
 
   // 選択中のトラックで使われている歌い方のf0を結合してピッチデータを生成する
-  const tempData = [];
+  const framewiseData = [];
   for (const singingGuide of singingGuidesInSelectedTrack.value) {
     // TODO: 補間を行うようにする
     if (singingGuide.query.frameRate !== frameRate) {
@@ -327,11 +212,11 @@ const generateOriginalPitchData = () => {
 
     // 無声子音区間以外のf0をtempDataにコピーする
     // NOTE: 無声子音区間は音程が無く、f0の値が大きく上下するので表示しない
-    if (tempData.length < singingGuideEndFrame) {
+    if (framewiseData.length < singingGuideEndFrame) {
       const valuesToPush = new Array(
-        singingGuideEndFrame - tempData.length,
+        singingGuideEndFrame - framewiseData.length,
       ).fill(VALUE_INDICATING_NO_DATA);
-      tempData.push(...valuesToPush);
+      framewiseData.push(...valuesToPush);
     }
     const startFrame = Math.max(0, singingGuideStartFrame);
     const endFrame = singingGuideEndFrame;
@@ -339,17 +224,17 @@ const generateOriginalPitchData = () => {
       const phoneme = framePhonemes[i - singingGuideStartFrame];
       const unvoiced = unvoicedPhonemes.includes(phoneme);
       if (!unvoiced) {
-        tempData[i] = f0[i - singingGuideStartFrame];
+        framewiseData[i] = f0[i - singingGuideStartFrame];
       }
     }
   }
-  return toPitchData(tempData, frameRate);
+  return await toPitchDataMap(framewiseData, frameRate);
 };
 
-const generatePitchEditData = () => {
+const generatePitchEditDataMap = async () => {
   const frameRate = editorFrameRate.value;
 
-  const tempData = [...pitchEditData.value];
+  const framewiseData = [...pitchEditData.value];
   // プレビュー中のピッチ編集があれば、適用する
   if (previewPitchEdit.value != undefined) {
     const previewPitchEditType = previewPitchEdit.value.type;
@@ -357,29 +242,29 @@ const generatePitchEditData = () => {
       const previewData = previewPitchEdit.value.data;
       const previewStartFrame = previewPitchEdit.value.startFrame;
       const previewEndFrame = previewStartFrame + previewData.length;
-      if (tempData.length < previewEndFrame) {
-        const valuesToPush = new Array(previewEndFrame - tempData.length).fill(
-          VALUE_INDICATING_NO_DATA,
-        );
-        tempData.push(...valuesToPush);
+      if (framewiseData.length < previewEndFrame) {
+        const valuesToPush = new Array(
+          previewEndFrame - framewiseData.length,
+        ).fill(VALUE_INDICATING_NO_DATA);
+        framewiseData.push(...valuesToPush);
       }
       for (let i = 0; i < previewData.length; i++) {
-        tempData[previewStartFrame + i] = previewData[i];
+        framewiseData[previewStartFrame + i] = previewData[i];
       }
     } else if (previewPitchEditType === "erase") {
       const startFrame = previewPitchEdit.value.startFrame;
       const endFrame = Math.min(
         startFrame + previewPitchEdit.value.frameLength,
-        tempData.length,
+        framewiseData.length,
       );
       for (let i = startFrame; i < endFrame; i++) {
-        tempData[i] = VALUE_INDICATING_NO_DATA;
+        framewiseData[i] = VALUE_INDICATING_NO_DATA;
       }
     } else {
       throw new ExhaustiveError(previewPitchEditType);
     }
   }
-  return toPitchData(tempData, frameRate);
+  return await toPitchDataMap(framewiseData, frameRate);
 };
 
 const asyncLock = new AsyncLock({ maxPending: 1 });
@@ -390,8 +275,7 @@ watch(
     asyncLock.acquire(
       "originalPitch",
       async () => {
-        const originalPitchData = generateOriginalPitchData();
-        await setPitchDataToPitchLine(originalPitchData, originalPitchLine);
+        originalPitchLine.pitchDataMap = await generateOriginalPitchDataMap();
         renderInNextFrame = true;
       },
       (err) => {
@@ -410,8 +294,7 @@ watch(
     asyncLock.acquire(
       "pitchEdit",
       async () => {
-        const pitchEditData = generatePitchEditData();
-        await setPitchDataToPitchLine(pitchEditData, pitchEditLine);
+        pitchEditLine.pitchDataMap = await generatePitchEditDataMap();
         renderInNextFrame = true;
       },
       (err) => {
@@ -424,22 +307,9 @@ watch(
   { immediate: true },
 );
 
-// ピッチラインカラーをテーマに合わせて変更
-watch(
-  [isDark],
-  () => {
-    const newOriginalPitchLineColor = isDark.value
-      ? originalPitchLineColorDark
-      : originalPitchLineColorLight;
-    const newPitchEditLineColor = isDark.value
-      ? pitchEditLineColorDark
-      : pitchEditLineColorLight;
-    originalPitchLineColor.value = newOriginalPitchLineColor;
-    pitchEditLineColor.value = newPitchEditLineColor;
-    renderInNextFrame = true;
-  },
-  { immediate: true },
-);
+watch(isDark, () => {
+  renderInNextFrame = true;
+});
 
 watch(
   () => [
@@ -455,27 +325,31 @@ watch(
 
 onMountedOrActivated(() => {
   const canvasContainerElement = canvasContainer.value;
+  const canvasElement = canvas.value;
   if (!canvasContainerElement) {
     throw new Error("canvasContainerElement is null.");
   }
+  if (!canvasElement) {
+    throw new Error("canvasElement is null.");
+  }
 
   canvasWidth = canvasContainerElement.clientWidth;
   canvasHeight = canvasContainerElement.clientHeight;
 
-  const canvasElement = document.createElement("canvas");
-  canvasElement.width = canvasWidth;
-  canvasElement.height = canvasHeight;
-  canvasContainerElement.appendChild(canvasElement);
-
   renderer = new PIXI.Renderer({
     view: canvasElement,
     backgroundAlpha: 0,
     antialias: true,
     resolution: window.devicePixelRatio || 1,
     autoDensity: true,
+    width: canvasWidth,
+    height: canvasHeight,
   });
   stage = new PIXI.Container();
 
+  stage.addChild(originalPitchLine.displayObject);
+  stage.addChild(pitchEditLine.displayObject);
+
   // webGLVersionをチェックする
   // 2未満の場合、ピッチの表示ができないのでエラーとしてロギングする
   const webGLVersion = renderer.context.webGLVersion;
@@ -514,11 +388,9 @@ onUnmountedOrDeactivated(() => {
   if (requestId != undefined) {
     window.cancelAnimationFrame(requestId);
   }
+  originalPitchLine.destroy();
+  pitchEditLine.destroy();
   stage?.destroy();
-  originalPitchLine.lineStripMap.forEach((value) => value.destroy());
-  originalPitchLine.lineStripMap.clear();
-  pitchEditLine.lineStripMap.forEach((value) => value.destroy());
-  pitchEditLine.lineStripMap.clear();
   renderer?.destroy(true);
   resizeObserver?.disconnect();
 });
diff --git a/src/sing/graphics/pitchLine.ts b/src/sing/graphics/pitchLine.ts
new file mode 100644
index 0000000000..7039f8e60e
--- /dev/null
+++ b/src/sing/graphics/pitchLine.ts
@@ -0,0 +1,143 @@
+import { z } from "zod";
+import * as PIXI from "pixi.js";
+import { calculateHash, getLast } from "@/sing/utility";
+import { Color, LineStrip } from "@/sing/graphics/lineStrip";
+
+export type PitchData = {
+  readonly baseX: number;
+  readonly baseY: number;
+}[];
+
+const pitchDataHashSchema = z.string().brand<"PitchDataHash">();
+
+export type PitchDataHash = z.infer<typeof pitchDataHashSchema>;
+
+export const calculatePitchDataHash = async (pitchData: PitchData) => {
+  const hash = await calculateHash(pitchData);
+  return pitchDataHashSchema.parse(hash);
+};
+
+export type ViewInfo = {
+  readonly viewportWidth: number;
+  readonly zoomX: number;
+  readonly zoomY: number;
+  readonly offsetX: number;
+  readonly offsetY: number;
+};
+
+/**
+ * ピッチラインを描画するクラス。
+ */
+export class PitchLine {
+  color: Color;
+  width: number;
+  isVisible: boolean;
+  pitchDataMap: Map<PitchDataHash, PitchData>;
+
+  private readonly lineStripMap: Map<PitchDataHash, LineStrip>;
+  private readonly container: PIXI.Container;
+
+  get displayObject(): PIXI.DisplayObject {
+    return this.container;
+  }
+
+  constructor(color: Color, width: number, isVisible: boolean) {
+    this.color = color;
+    this.width = width;
+    this.isVisible = isVisible;
+    this.pitchDataMap = new Map();
+
+    this.lineStripMap = new Map();
+    this.container = new PIXI.Container();
+  }
+
+  /**
+   * ピッチラインを更新する。（パラメーターの変更を適用する）
+   */
+  update(viewInfo: ViewInfo) {
+    this.container.renderable = this.isVisible;
+    if (!this.isVisible) {
+      return;
+    }
+
+    const removedLineStrips: LineStrip[] = [];
+
+    // 対応するピッチデータが無い場合、または色・幅が変わった場合に、LineStripを削除する
+    for (const [key, lineStrip] of this.lineStripMap) {
+      if (
+        !this.pitchDataMap.has(key) ||
+        !lineStrip.color.equals(this.color) ||
+        lineStrip.width !== this.width
+      ) {
+        this.container.removeChild(lineStrip.displayObject);
+        removedLineStrips.push(lineStrip);
+        this.lineStripMap.delete(key);
+      }
+    }
+
+    // ピッチデータに対応するLineStripが無かったら作成する
+    for (const [key, pitchData] of this.pitchDataMap) {
+      if (this.lineStripMap.has(key)) {
+        continue;
+      }
+
+      // 再利用できるLineStripがあれば再利用し、なければLineStripを作成する
+      let lineStrip = removedLineStrips.pop();
+      if (
+        lineStrip != undefined &&
+        lineStrip.color.equals(this.color) &&
+        lineStrip.width === this.width
+      ) {
+        lineStrip.numOfPoints = pitchData.length;
+      } else {
+        lineStrip = new LineStrip(pitchData.length, this.color, this.width);
+      }
+
+      this.container.addChild(lineStrip.displayObject);
+      this.lineStripMap.set(key, lineStrip);
+    }
+
+    // 再利用されなかったLineStripは破棄する
+    for (const lineStrip of removedLineStrips) {
+      lineStrip.destroy();
+    }
+
+    // LineStripを更新
+    for (const [key, pitchData] of this.pitchDataMap) {
+      const lineStrip = this.lineStripMap.get(key);
+      if (lineStrip == undefined) {
+        throw new Error("lineStrip is undefined.");
+      }
+
+      // カリングを行う
+      const startBaseX = pitchData[0].baseX;
+      const lastBaseX = getLast(pitchData).baseX;
+      const startX = startBaseX * viewInfo.zoomX - viewInfo.offsetX;
+      const lastX = lastBaseX * viewInfo.zoomX - viewInfo.offsetX;
+      if (startX >= viewInfo.viewportWidth || lastX <= 0) {
+        lineStrip.renderable = false;
+        continue;
+      }
+      lineStrip.renderable = true;
+
+      // ポイントを計算してlineStripに設定＆更新
+      for (let i = 0; i < pitchData.length; i++) {
+        const baseX = pitchData[i].baseX;
+        const baseY = pitchData[i].baseY;
+        const x = baseX * viewInfo.zoomX - viewInfo.offsetX;
+        const y = baseY * viewInfo.zoomY - viewInfo.offsetY;
+        lineStrip.setPoint(i, x, y);
+      }
+      lineStrip.update();
+    }
+  }
+
+  /**
+   * 破棄する。
+   */
+  destroy() {
+    this.lineStripMap.forEach((value) => value.destroy());
+    this.lineStripMap.clear();
+    this.container.destroy();
+  }
+}
diff --git a/src/sing/viewHelper.ts b/src/sing/viewHelper.ts
index fade4738cb..88f2fcd511 100644
--- a/src/sing/viewHelper.ts
+++ b/src/sing/viewHelper.ts
@@ -1,6 +1,5 @@
 import { z } from "zod";
 import { StyleInfo } from "@/type/preload";
-import { calculateHash } from "@/sing/utility";
 import { isMac } from "@/helpers/platform";
 
 const BASE_X_PER_QUARTER_NOTE = 120;
@@ -119,20 +118,6 @@ export const getStyleDescription = (style: StyleInfo) => {
   return description.join("・");
 };
 
-export type PitchData = {
-  readonly ticksArray: number[];
-  readonly data: number[];
-};
-
-const pitchDataHashSchema = z.string().brand<"PitchDataHash">();
-
-export type PitchDataHash = z.infer<typeof pitchDataHashSchema>;
-
-export async function calculatePitchDataHash(pitchData: PitchData) {
-  const hash = await calculateHash(pitchData);
-  return pitchDataHashSchema.parse(hash);
-}
-
 export type MouseButton = "LEFT_BUTTON" | "RIGHT_BUTTON" | "OTHER_BUTTON";
 
 export type PreviewMode =