From 7b4cb60c73644a8d3aa1b042879e9d270cadddc0 Mon Sep 17 00:00:00 2001
From: Hiroshiba <hihokaruta@gmail.com>
Date: Fri, 31 Jan 2025 19:00:45 +0900
Subject: [PATCH 1/3] =?UTF-8?q?chore:=20=E9=96=8B=E7=99=BA=E5=AE=9F?=
 =?UTF-8?q?=E8=A1=8C=E3=83=BB=E3=83=93=E3=83=AB=E3=83=89=E6=99=82=E3=81=AB?=
 =?UTF-8?q?vite-plugin-checker=E3=81=A7lint=E3=82=92=E5=AE=9F=E8=A1=8C?=
 =?UTF-8?q?=E3=81=97=E3=81=AA=E3=81=84=E3=82=88=E3=81=86=E3=81=AB=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=20(#2516)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite.config.mts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/vite.config.mts b/vite.config.mts
index e4da29c038..1ea3fd40de 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -79,9 +79,6 @@ export default defineConfig((options) => {
       mode !== "test" &&
         checker({
           overlay: false,
-          eslint: {
-            lintCommand: "eslint --ext .ts,.vue .",
-          },
           vueTsc: true,
         }),
       isElectron && [

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 2/3] =?UTF-8?q?refactor:=20SequencerPitch=E3=82=92?=
 =?UTF-8?q?=E3=83=AA=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 =

From 757841ce54a6c5be9029b93659b2ceea3737db54 Mon Sep 17 00:00:00 2001
From: "Nanashi." <sevenc7c@sevenc7c.com>
Date: Sat, 1 Feb 2025 04:04:50 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E3=82=A4=E3=83=B3=E3=83=9D?=
 =?UTF-8?q?=E3=83=BC=E3=83=88=E4=B8=80=E8=A6=A7=E3=82=92=E3=83=81=E3=82=A7?=
 =?UTF-8?q?=E3=83=83=E3=82=AF=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=20(#2513)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
---
 package.json                     |   7 +-
 pnpm-lock.yaml                   |  14 +++
 tools/checkSuspiciousImports.mts | 209 +++++++++++++++++++++++++++++++
 vite.config.mts                  |  46 ++++++-
 4 files changed, 269 insertions(+), 7 deletions(-)
 create mode 100644 tools/checkSuspiciousImports.mts

diff --git a/package.json b/package.json
index e6621bdfbe..df9e6b1d99 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
 
     "license:generate": "tsx tools/generateLicenses.mts",
     "license:merge": "tsx tools/mergeLicenses.mts",
+    "check-suspicious-imports": "tsx tools/checkSuspiciousImports.mts",
 
     "test:unit": "vitest --run",
     "test-watch:unit": "vitest --watch",
@@ -33,10 +34,10 @@
     "test-watch:storybook-vrt": "cross-env TARGET=storybook PWTEST_WATCH=1 playwright test",
     "test-ui:storybook-vrt": "cross-env TARGET=storybook playwright test --ui",
 
-    "electron:build": "cross-env VITE_TARGET=electron vite build && electron-builder --config electron-builder.config.js --publish never",
     "electron:serve": "cross-env VITE_TARGET=electron vite",
+    "electron:build": "cross-env VITE_TARGET=electron NODE_ENV=production vite build && electron-builder --config electron-builder.config.js --publish never",
     "browser:serve": "cross-env VITE_TARGET=browser vite",
-    "browser:build": "cross-env VITE_TARGET=browser vite build",
+    "browser:build": "cross-env VITE_TARGET=browser NODE_ENV=production vite build",
     "storybook": "storybook dev --port 6006",
     "storybook:build": "storybook build",
 
@@ -114,6 +115,8 @@
     "@vue/eslint-config-prettier": "9.0.0",
     "@vue/eslint-config-typescript": "13.0.0",
     "@vue/test-utils": "2.4.5",
+    "acorn": "8.14.0",
+    "acorn-walk": "8.3.4",
     "chromatic": "11.5.4",
     "cross-env": "7.0.3",
     "dotenv": "16.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2e684071ae..fe2cd30cc3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -199,6 +199,12 @@ importers:
       '@vue/test-utils':
         specifier: 2.4.5
         version: 2.4.5
+      acorn:
+        specifier: 8.14.0
+        version: 8.14.0
+      acorn-walk:
+        specifier: 8.3.4
+        version: 8.3.4
       chromatic:
         specifier: 11.5.4
         version: 11.5.4
@@ -1934,6 +1940,10 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
+    engines: {node: '>=0.4.0'}
+
   acorn@7.4.1:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
@@ -7060,6 +7070,10 @@ snapshots:
     dependencies:
       acorn: 8.14.0
 
+  acorn-walk@8.3.4:
+    dependencies:
+      acorn: 8.14.0
+
   acorn@7.4.1: {}
 
   acorn@8.14.0: {}
diff --git a/tools/checkSuspiciousImports.mts b/tools/checkSuspiciousImports.mts
new file mode 100644
index 0000000000..6cb86ae965
--- /dev/null
+++ b/tools/checkSuspiciousImports.mts
@@ -0,0 +1,209 @@
+/**
+ * 与えられたjsファイルのimport/requireを解析し、以下の条件に当てはまらないものがあれば警告を出力する：
+ * - Node.js 標準である
+ * - electron
+ * - try-catch内での明示的に許可されたパッケージ
+ *
+ * また、try-catch内での明示的に許可されたパッケージが使われていない場合も警告を出力する。
+ *
+ * pnpm run check-suspicious-imports ./path/to/file.js のように単体でも実行可能。
+ *
+ * NOTE:
+ * electron-builderはpnpmを一緒に使うとnode_modulesが壊れる問題があるが、
+ * それはビルド後（dist/{main.js,preload.js}）でパッケージがimport/requireされなければ問題ないため、
+ * このスクリプトを使って問題がないかチェックする。
+ * ref: https://github.com/VOICEVOX/voicevox/issues/2508
+ */
+
+import { builtinModules } from "module";
+import { styleText } from "util";
+import fs from "fs/promises";
+import yargs from "yargs";
+import { parse } from "acorn";
+import { ancestor as visitWithAncestor } from "acorn-walk";
+import { hideBin } from "yargs/helpers";
+
+const defaultAllowedModules = [
+  ...builtinModules.map((m) => `node:${m}`),
+  "electron",
+];
+
+type Import = {
+  path: string;
+  isInsideTryCatch: boolean;
+};
+export type CheckSuspiciousImportsOptions = {
+  allowedModules?: string[];
+  allowedInTryCatchModules?: string[];
+  list?: boolean;
+};
+export function checkSuspiciousImports(
+  file: string,
+  jsContent: string,
+  options: CheckSuspiciousImportsOptions = {},
+): void {
+  console.log(`Checking suspicious imports in ${file}...`);
+  const ast = parse(jsContent, {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  });
+
+  const allImports: Import[] = [];
+
+  const allowedModules = [
+    ...defaultAllowedModules,
+    ...(options.allowedModules ?? []),
+  ];
+  const allowedInTryCatchModules = options.allowedInTryCatchModules ?? [];
+
+  visitWithAncestor(ast, {
+    ImportDeclaration(node) {
+      const importPath = node.source.value;
+      if (typeof importPath === "string") {
+        allImports.push({
+          path: importPath,
+          isInsideTryCatch: false,
+        });
+      }
+    },
+    CallExpression(node, _, ancestors) {
+      const isInsideTryCatch = ancestors.some(
+        (ancestor) => ancestor.type === "TryStatement",
+      );
+      if (node.callee.type === "Identifier" && node.callee.name === "require") {
+        const importPath =
+          node.arguments[0].type === "Literal" && node.arguments[0].value;
+        if (typeof importPath === "string") {
+          allImports.push({
+            path: importPath,
+            isInsideTryCatch,
+          });
+        }
+      }
+    },
+  });
+
+  const normalizedImports: Import[] = [];
+  for (const importInfo of allImports) {
+    let path = importInfo.path;
+    if (builtinModules.includes(path) && !path.startsWith("node:")) {
+      path = `node:${path}`;
+    }
+    const existingImport = normalizedImports.find((i) => i.path === path);
+    if (existingImport) {
+      existingImport.isInsideTryCatch &&= importInfo.isInsideTryCatch;
+    } else {
+      normalizedImports.push({
+        ...importInfo,
+        path,
+      });
+    }
+  }
+
+  const allowedImports = normalizedImports.filter((i) =>
+    allowedModules.includes(i.path),
+  );
+  const allowedInTryCatchImports = normalizedImports.filter(
+    (i) =>
+      !allowedModules.includes(i.path) &&
+      allowedInTryCatchModules.includes(i.path),
+  );
+  const suspiciousImports = normalizedImports.filter(
+    (i) =>
+      !allowedModules.includes(i.path) &&
+      !allowedInTryCatchModules.includes(i.path),
+  );
+
+  for (const [color, title, imports] of [
+    ["green", "Allowed", allowedImports],
+    ["yellow", "Allowed in try-catch", allowedInTryCatchImports],
+    ["red", "Suspicious", suspiciousImports],
+  ] as const) {
+    if (options.list) {
+      console.log(styleText(color, `  ${title}:`));
+      for (const i of imports) {
+        console.log(styleText(color, `    ${i.path}`));
+      }
+      if (imports.length === 0) {
+        console.log(styleText(color, `    (none)`));
+      }
+    } else {
+      console.log(styleText(color, `  ${title}: ${imports.length}`));
+    }
+  }
+
+  if (suspiciousImports.length > 0) {
+    throw new Error(
+      `Suspicious imports found: ${suspiciousImports
+        .map((i) => i.path)
+        .join(", ")}`,
+    );
+  }
+
+  const unusedAllowedInTryCatchModules = allowedInTryCatchModules.filter(
+    (m) => !allowedInTryCatchImports.some((i) => i.path === m),
+  );
+  if (options.list) {
+    console.log(styleText("yellow", `  Unused allowed in try-catch modules:`));
+    for (const m of unusedAllowedInTryCatchModules) {
+      console.log(styleText("yellow", `    ${m}`));
+    }
+    if (unusedAllowedInTryCatchModules.length === 0) {
+      console.log(styleText("yellow", `    (none)`));
+    }
+  } else {
+    console.log(
+      styleText(
+        "yellow",
+        `  Unused allowed in try-catch modules: ${unusedAllowedInTryCatchModules.length}`,
+      ),
+    );
+  }
+  if (unusedAllowedInTryCatchModules.length > 0) {
+    throw new Error(
+      `Some allowed in try-catch modules are not used in try-catch block: ${unusedAllowedInTryCatchModules.join(
+        ", ",
+      )}`,
+    );
+  }
+}
+
+if (import.meta.filename === process.argv[1]) {
+  const parser = yargs(hideBin(process.argv))
+    .option("allowed-modules", {
+      type: "string",
+      array: true,
+      description: "Allowed modules",
+      alias: "a",
+    })
+    .option("allowed-in-try-catch-modules", {
+      type: "string",
+      array: true,
+      description: "Allowed in try-catch modules",
+      alias: "t",
+    })
+    .positional("files", {
+      type: "string",
+      description: "Files to check",
+      array: true,
+    })
+    .strictCommands()
+    .demandCommand(1);
+  const args = await parser.parse();
+
+  for (const rawFile of args._) {
+    const file = rawFile.toString();
+    fs.readFile(file, "utf-8")
+      .then((content) => {
+        checkSuspiciousImports(file, content, {
+          allowedModules: args.allowedModules,
+          allowedInTryCatchModules: args.allowedInTryCatchModules,
+          list: true,
+        });
+      })
+      .catch((e) => {
+        console.error(e);
+        process.exit(1);
+      });
+  }
+}
diff --git a/vite.config.mts b/vite.config.mts
index 1ea3fd40de..f091ae42cd 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -10,8 +10,14 @@ import { BuildOptions, defineConfig, loadEnv, Plugin } from "vite";
 import { quasar } from "@quasar/vite-plugin";
 import { z } from "zod";
 
+import {
+  checkSuspiciousImports,
+  CheckSuspiciousImportsOptions,
+} from "./tools/checkSuspiciousImports.mjs";
+
 const isElectron = process.env.VITE_TARGET === "electron";
 const isBrowser = process.env.VITE_TARGET === "browser";
+const isProduction = process.env.NODE_ENV === "production";
 
 export default defineConfig((options) => {
   const mode = z
@@ -48,7 +54,7 @@ export default defineConfig((options) => {
     : false;
 
   // ref: electronの起動をスキップしてデバッグ起動を軽くする
-  const skipLahnchElectron =
+  const skipLaunchElectron =
     mode === "test" || process.env.SKIP_LAUNCH_ELECTRON === "1";
 
   return {
@@ -83,18 +89,28 @@ export default defineConfig((options) => {
         }),
       isElectron && [
         cleanDistPlugin(),
+        // TODO: 関数で切り出して共通化できる部分はまとめる
         electron([
           {
             entry: "./backend/electron/main.ts",
             // ref: https://github.com/electron-vite/vite-plugin-electron/pull/122
             onstart: ({ startup }) => {
               console.log("main process build is complete.");
-              if (!skipLahnchElectron) {
+              if (!skipLaunchElectron) {
                 void startup([".", "--no-sandbox"]);
               }
             },
             vite: {
-              plugins: [tsconfigPaths({ root: import.meta.dirname })],
+              plugins: [
+                tsconfigPaths({ root: import.meta.dirname }),
+                isProduction &&
+                  checkSuspiciousImportsPlugin({
+                    allowedInTryCatchModules: [
+                      // systeminformationのoptionalな依存。try-catch内なので許可。
+                      "osx-temperature-sensor",
+                    ],
+                  }),
+              ],
               build: {
                 outDir: path.resolve(import.meta.dirname, "dist"),
                 sourcemap,
@@ -105,12 +121,15 @@ export default defineConfig((options) => {
             // ref: https://electron-vite.github.io/guide/preload-not-split.html
             entry: "./backend/electron/preload.ts",
             onstart({ reload }) {
-              if (!skipLahnchElectron) {
+              if (!skipLaunchElectron) {
                 reload();
               }
             },
             vite: {
-              plugins: [tsconfigPaths({ root: import.meta.dirname })],
+              plugins: [
+                tsconfigPaths({ root: import.meta.dirname }),
+                isProduction && checkSuspiciousImportsPlugin({}),
+              ],
               build: {
                 outDir: path.resolve(import.meta.dirname, "dist"),
                 sourcemap,
@@ -153,3 +172,20 @@ const injectBrowserPreloadPlugin = (): Plugin => {
     },
   };
 };
+
+const checkSuspiciousImportsPlugin = (
+  options: CheckSuspiciousImportsOptions,
+): Plugin => {
+  return {
+    name: "check-suspicious-imports",
+    enforce: "post",
+    apply: "build",
+    writeBundle(_options, bundle) {
+      for (const [file, chunk] of Object.entries(bundle)) {
+        if (chunk.type === "chunk") {
+          checkSuspiciousImports(file, chunk.code, options);
+        }
+      }
+    },
+  };
+};