仕掛かり

romot-co · Apr 25, 2024 · 3954356 · 3954356
1 parent fad9bfb
commit 3954356
Show file tree

Hide file tree

Showing 5 changed files with 347 additions and 67 deletions.
diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
@@ -55,6 +55,8 @@
               :width="gridCellWidth"
               :height="gridCellHeight"
               :class="`sequencer-grid-cell sequencer-grid-cell-${keyInfo.color}`"
+              stroke-width="1"
+              stroke="rgba(0, 0, 0, 0.1)"
             />
             <template v-for="(keyInfo, index) in keyInfos" :key="index">
               <line

diff --git a/src/components/Sing/SequencerNote.vue b/src/components/Sing/SequencerNote.vue
@@ -278,8 +278,8 @@ const onLyricInput = (event: Event) => {
   &.selected {
     .note-bar {
       background: var(--md-ref-palette-primary80);
-      border-color: var(--md-ref-palette-primary70);
-      outline: 2px solid var(--md-ref-palette-primary70);
+      border-color: var(--md-ref-palette-primary90);
+      outline: 2px solid var(--md-ref-palette-primary90);
       z-index: 1;
     }
   }
@@ -288,7 +288,7 @@ const onLyricInput = (event: Event) => {
     .note-bar {
       background: var(--md-ref-palette-primary80);
       border-color: var(--md-ref-palette-primary70);
-      outline: 2px solid var(--md-ref-palette-primary70);
+      outline: 2px solid var(--md-ref-palette-primary90);
     }
 
     .note-lyric {
@@ -336,7 +336,7 @@ const onLyricInput = (event: Event) => {
   position: absolute;
   width: calc(100% + 1px);
   height: 100%;
-  background-color: var(--md-source);
+  background-color: var(--md-ref-palette-primary70);
   border-radius: 4px;
   cursor: move;
 }
@@ -351,7 +351,7 @@ const onLyricInput = (event: Event) => {
   z-index: 11;
 
   &:hover {
-    background-color: var(--md-ref-palette-primary70);
+    background-color: var(--md-ref-palette-primary90);
   }
 }
 
@@ -365,7 +365,7 @@ const onLyricInput = (event: Event) => {
   z-index: 11;
 
   &:hover {
-    background-color: var(--md-ref-palette-primary70);
+    background-color: var(--md-ref-palette-primary90);
   }
 }
 

diff --git a/src/components/Sing/ToolBar.vue b/src/components/Sing/ToolBar.vue
@@ -27,34 +27,37 @@
         label="テンポ"
         hide-bottom-space
         class="sing-tempo"
-        @update:model-value="setBpmInputBuffer"
         @change="setTempo"
-      >
-        <template #prepend>
-          <QIcon name="music_note" size="xs" class="sing-tempo-icon" />
-        </template>
-      </QInput>
-      <div class="sing-beats">
-        <QInput
-          type="number"
-          :model-value="beatsInputBuffer"
-          label="拍子"
-          hide-bottom-space
-          class="sing-time-signature"
-          @update:model-value="setBeatsInputBuffer"
-          @change="setTimeSignature"
-        />
-        <div class="sing-beats-separator">/</div>
-        <QInput
-          type="number"
-          :model-value="beatTypeInputBuffer"
-          label=""
-          hide-bottom-space
-          class="sing-time-signature"
-          @update:model-value="setBeatTypeInputBuffer"
-          @change="setTimeSignature"
-        />
-      </div>
+      />
+      <QField label="拍子" hide-bottom-space dense>
+        <div class="sing-beats">
+          <QSelect
+            :model-value="timeSignatures[0].beats"
+            :options="beatsOptions"
+            hide-bottom-space
+            hide-dropdown-icon
+            dense
+            options-dense
+            transition-show="none"
+            transition-hide="none"
+            class="sing-time-signature"
+            @update:model-value="setBeats"
+          />
+          <div class="sing-beats-separator">/</div>
+          <QSelect
+            :model-value="timeSignatures[0].beatType"
+            :options="beatTypeOptions"
+            hide-bottom-space
+            hide-dropdown-icon
+            dense
+            options-dense
+            transition-show="none"
+            transition-hide="none"
+            class="sing-time-signature"
+            @update:model-value="setBeatType"
+          />
+        </div>
+      </QField>
     </div>
     <!-- player -->
     <div class="sing-player">
@@ -115,6 +118,7 @@
         color="primary"
         text-color="display-on-primary"
         hide-bottom-space
+        hide-dropdown-icon
         options-dense
         label="スナップ"
         transition-show="none"
@@ -195,10 +199,21 @@ const keyRangeAdjustment = computed(
 const volumeRangeAdjustment = computed(
   () => store.getters.SELECTED_TRACK.volumeRangeAdjustment,
 );
+const beatsOptions = computed(() => {
+  return Array.from({ length: 32 }, (_, i) => ({
+    label: (i + 1).toString(),
+    value: i + 1,
+  }));
+});
+
+const beatTypeOptions = computed(() => {
+  return [2, 4, 8, 16, 32].map((beatType) => ({
+    label: beatType.toString(),
+    value: beatType,
+  }));
+});
 
 const bpmInputBuffer = ref(120);
-const beatsInputBuffer = ref(4);
-const beatTypeInputBuffer = ref(4);
 const keyRangeAdjustmentInputBuffer = ref(0);
 const volumeRangeAdjustmentInputBuffer = ref(0);
 
@@ -210,15 +225,6 @@ watch(
   { deep: true, immediate: true },
 );
 
-watch(
-  timeSignatures,
-  () => {
-    beatsInputBuffer.value = timeSignatures.value[0].beats;
-    beatTypeInputBuffer.value = timeSignatures.value[0].beatType;
-  },
-  { deep: true, immediate: true },
-);
-
 watch(
   keyRangeAdjustment,
   () => {
@@ -243,22 +249,6 @@ const setBpmInputBuffer = (bpmStr: string | number | null) => {
   bpmInputBuffer.value = bpmValue;
 };
 
-const setBeatsInputBuffer = (beatsStr: string | number | null) => {
-  const beatsValue = Number(beatsStr);
-  if (!isValidBeats(beatsValue)) {
-    return;
-  }
-  beatsInputBuffer.value = beatsValue;
-};
-
-const setBeatTypeInputBuffer = (beatTypeStr: string | number | null) => {
-  const beatTypeValue = Number(beatTypeStr);
-  if (!isValidBeatType(beatTypeValue)) {
-    return;
-  }
-  beatTypeInputBuffer.value = beatTypeValue;
-};
-
 const setKeyRangeAdjustmentInputBuffer = (
   KeyRangeAdjustmentStr: string | number | null,
 ) => {
@@ -289,14 +279,28 @@ const setTempo = () => {
   });
 };
 
-const setTimeSignature = () => {
-  const beats = beatsInputBuffer.value;
-  const beatType = beatTypeInputBuffer.value;
+const setBeats = (beats: { label: string; value: number }) => {
+  if (!isValidBeats(beats.value)) {
+    return;
+  }
+  store.dispatch("COMMAND_SET_TIME_SIGNATURE", {
+    timeSignature: {
+      measureNumber: 1,
+      beats: beats.value,
+      beatType: timeSignatures.value[0].beatType,
+    },
+  });
+};
+
+const setBeatType = (beatType: { label: string; value: number }) => {
+  if (!isValidBeatType(beatType.value)) {
+    return;
+  }
   store.dispatch("COMMAND_SET_TIME_SIGNATURE", {
     timeSignature: {
       measureNumber: 1,
-      beats,
-      beatType,
+      beats: timeSignatures.value[0].beats,
+      beatType: beatType.value,
     },
   });
 };
@@ -482,7 +486,7 @@ onUnmounted(() => {
 .sing-beats {
   align-items: center;
   display: flex;
-  margin-left: 8px;
+  //margin-left: 8px;
   position: relative;
 }
 
@@ -491,6 +495,7 @@ onUnmounted(() => {
   position: relative;
   width: 32px;
 }
+
 .sing-beats-separator {
   color: rgba(colors.$display-rgb, 0.6);
   position: relative;
@@ -551,6 +556,6 @@ onUnmounted(() => {
 }
 
 .sing-snap {
-  min-width: 120px;
+  min-width: 80px;
 }
 </style>
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
@@ -1,4 +1,5 @@
 @use './variables' as vars;
+@use './tokens' as tokens;
 @use './colors' as colors;
 @import "./fonts";