仕掛かり

romot-co · Apr 24, 2024 · fad9bfb · fad9bfb
1 parent 0be6de9
commit fad9bfb
Show file tree

Hide file tree

Showing 12 changed files with 405 additions and 105 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@gtm-support/vue-gtm": "1.2.3",
+    "@material/material-color-utilities": "0.2.7",
     "@quasar/extras": "1.10.10",
     "@tonejs/midi": "2.0.28",
     "async-lock": "1.4.0",

diff --git a/public/themes/dark.json b/public/themes/dark.json
@@ -14,10 +14,10 @@
     "text-splitter-hover": "#394152",
     "active-point-focus": "#292F38",
     "active-point-hover": "#272A2F",
-    "sequencer-whitekey-cell": "#393939",
-    "sequencer-blackkey-cell": "#2D2D2D",
-    "sequencer-main-divider": "#121212",
-    "sequencer-sub-divider": "#2C2C2C",
+    "sequencer-whitekey-cell": "#242424",
+    "sequencer-blackkey-cell": "#191919",
+    "sequencer-main-divider": "#000000",
+    "sequencer-sub-divider": "#000000",
     "sequencer-white-key": "#EEEEEE",
     "sequencer-black-key": "#555555"
   }

diff --git a/public/themes/default.json b/public/themes/default.json
@@ -14,11 +14,11 @@
     "text-splitter-hover": "#CCDDFF",
     "active-point-focus": "#E0EAFF",
     "active-point-hover": "#EEF3FF",
-    "sequencer-whitekey-cell": "#F5F7F5",
-    "sequencer-blackkey-cell": "#EAECEA",
+    "sequencer-whitekey-cell": "#FFFFFF",
+    "sequencer-blackkey-cell": "#F2F2F2",
     "sequencer-main-divider": "#B0B0B0",
     "sequencer-sub-divider": "#CECECE",
     "sequencer-white-key": "#FFFFFF",
-    "sequencer-black-key": "#333333"
+    "sequencer-black-key": "#555555"
   }
 }
diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
@@ -12,7 +12,7 @@
     <SequencerKeys
       class="sequencer-keys"
       :offset="scrollY"
-      :black-key-width="28"
+      :black-key-width="24"
     />
     <!-- シーケンサ -->
     <div
@@ -58,13 +58,17 @@
             />
             <template v-for="(keyInfo, index) in keyInfos" :key="index">
               <line
-                v-if="keyInfo.pitch === 'C'"
+                v-if="keyInfo.pitch === 'C' || keyInfo.pitch === 'F'"
                 x1="0"
                 :x2="gridCellWidth"
-                :y1="gridCellHeight * (index + 1)"
-                :y2="gridCellHeight * (index + 1)"
+                :y1="gridCellHeight * (index + 1) + 0.5"
+                :y2="gridCellHeight * (index + 1) + 0.5"
                 stroke-width="1"
-                class="sequencer-grid-octave-line"
+                :class="
+                  keyInfo.pitch === 'C'
+                    ? 'sequencer-grid-octave-line'
+                    : 'sequencer-grid-f-line'
+                "
               />
             </template>
           </pattern>
@@ -77,8 +81,8 @@
             <line
               v-for="n in beatsPerMeasure"
               :key="n"
-              :x1="beatWidth * (n - 1)"
-              :x2="beatWidth * (n - 1)"
+              :x1="beatWidth * (n - 1) + 0.5"
+              :x2="beatWidth * (n - 1) + 0.5"
               y1="0"
               y2="100%"
               stroke-width="1"
@@ -1332,16 +1336,18 @@ const contextMenuData = ref<ContextMenuItemData[]>([
 .score-sequencer {
   backface-visibility: hidden;
   display: grid;
-  grid-template-rows: 30px 1fr;
+  grid-template-rows: 32px 1fr;
   grid-template-columns: 48px 1fr;
 }
 
 .sequencer-corner {
+  height: 36px;
   grid-row: 1;
   grid-column: 1;
-  background: colors.$background;
+  background: colors.$sing-ruler;
   border-top: 1px solid colors.$sequencer-sub-divider;
   border-bottom: 1px solid colors.$sequencer-sub-divider;
+  z-index: 1;
 }
 
 .sequencer-ruler {
@@ -1369,12 +1375,12 @@ const contextMenuData = ref<ContextMenuItemData[]>([
 .sequencer-grid {
   display: block;
   pointer-events: none;
+  shape-rendering: crispEdges;
 }
 
 .sequencer-grid-cell {
   display: block;
-  stroke: rgba(colors.$sequencer-sub-divider-rgb, 0.3);
-  stroke-width: 1;
+  shape-rendering: crispEdges;
 }
 
 .sequencer-grid-octave-cell {
@@ -1384,6 +1390,13 @@ const contextMenuData = ref<ContextMenuItemData[]>([
 .sequencer-grid-octave-line {
   backface-visibility: hidden;
   stroke: colors.$sequencer-main-divider;
+  shape-rendering: crispEdges;
+}
+
+.sequencer-grid-f-line {
+  backface-visibility: hidden;
+  stroke: colors.$sequencer-sub-divider;
+  shape-rendering: crispEdges;
 }
 
 .sequencer-grid-cell-white {
@@ -1397,11 +1410,13 @@ const contextMenuData = ref<ContextMenuItemData[]>([
 .sequencer-grid-measure-line {
   backface-visibility: hidden;
   stroke: colors.$sequencer-main-divider;
+  shape-rendering: crispEdges;
 }
 
 .sequencer-grid-beat-line {
   backface-visibility: hidden;
   stroke: colors.$sequencer-sub-divider;
+  shape-rendering: crispEdges;
 }
 
 .sequencer-guideline {
@@ -1437,12 +1452,11 @@ const contextMenuData = ref<ContextMenuItemData[]>([
 .sequencer-playhead {
   position: absolute;
   top: 0;
-  left: -2px;
-  width: 4px;
+  left: 0;
+  width: 1.5px;
   height: 100%;
-  background: colors.$primary;
-  border-left: 1px solid rgba(colors.$background-rgb, 0.83);
-  border-right: 1px solid rgba(colors.$background-rgb, 0.83);
+  background: colors.$sequencer-playhead;
+  will-change: transform;
 }
 
 .rect-select-preview {

diff --git a/src/components/Sing/SequencerKeys.vue b/src/components/Sing/SequencerKeys.vue
@@ -181,7 +181,7 @@ onUnmounted(() => {
 
 .white-key {
   fill: colors.$sequencer-white-key;
-  stroke: colors.$sequencer-main-divider;
+  stroke: colors.$sequencer-sub-divider;
 }
 
 .white-key-being-pressed {
@@ -194,7 +194,7 @@ onUnmounted(() => {
 }
 
 .black-key-being-pressed {
-  fill: colors.$primary;
+  fill: var(--md-ref-palette-primary80);
 }
 
 .pitchname {

diff --git a/src/components/Sing/SequencerNote.vue b/src/components/Sing/SequencerNote.vue
@@ -275,113 +275,110 @@ const onLyricInput = (event: Event) => {
   top: 0;
   left: 0;
 
-  &.below-pitch {
-    .note-bar {
-      background-color: rgba(colors.$primary-rgb, 0.18);
-      border-color: hsl(130, 35%, 78%);
-    }
-  }
-
   &.selected {
-    // 色は仮
     .note-bar {
-      background-color: hsl(33, 100%, 50%);
-    }
-
-    &.below-pitch {
-      .note-bar {
-        background-color: rgba(hsl(33, 100%, 50%), 0.18);
-      }
+      background: var(--md-ref-palette-primary80);
+      border-color: var(--md-ref-palette-primary70);
+      outline: 2px solid var(--md-ref-palette-primary70);
+      z-index: 1;
     }
   }
   // TODO：もっといい見た目を考える
   &.preview-lyric {
     .note-bar {
-      background-color: hsl(130, 35%, 90%);
-      border: 2px solid colors.$primary;
+      background: var(--md-ref-palette-primary80);
+      border-color: var(--md-ref-palette-primary70);
+      outline: 2px solid var(--md-ref-palette-primary70);
     }
 
-    &.below-pitch {
-      .note-bar {
-        background-color: rgba(hsl(130, 100%, 50%), 0.18);
-      }
+    .note-lyric {
+      border-color: var(--md-ref-palette-primary90);
     }
   }
 
   &.overlapping,
   &.invalid-phrase {
     .note-bar {
-      background-color: rgba(colors.$warning-rgb, 0.5);
+      background-color: var(--md-sys-color-error);
     }
 
     .note-lyric {
-      opacity: 0.6;
+      opacity: 0.12;
     }
 
     &.selected {
       .note-bar {
-        background-color: rgba(colors.$warning-rgb, 0.5);
-        border-color: colors.$warning;
+        background-color: var(--md-sys-color-error);
       }
     }
   }
 }
 
 .note-lyric {
+  box-sizing: border-box;
+  border-bottom: 4px solid transparent;
   position: absolute;
-  left: 0.125rem;
-  bottom: 0;
-  min-width: 2rem;
+  left: 2px;
+  bottom: -4px;
   padding: 0;
   background: transparent;
-  color: #121212;
+  color: var(--md-sys-color-on-primary-dark);
   font-size: 1rem;
-  font-weight: 700;
-  text-shadow:
-    -1px -1px 0 #fff,
-    1px -1px 0 #fff,
-    -1px 1px 0 #fff,
-    1px 1px 0 #fff;
+  font-weight: 500;
   white-space: nowrap;
   pointer-events: none;
+  z-index: 10;
+  transition: all ease-in-out 0.4s;
 }
 
 .note-bar {
+  box-sizing: border-box;
   position: absolute;
   width: calc(100% + 1px);
   height: 100%;
-  background-color: colors.$primary;
-  border: 1px solid rgba(colors.$background-rgb, 0.5);
-  border-radius: 2px;
+  background-color: var(--md-source);
+  border-radius: 4px;
   cursor: move;
 }
 
 .note-left-edge {
   position: absolute;
   top: 0;
   left: -1px;
-  width: 5px;
+  width: 6px;
   height: 100%;
-  cursor: ew-resize;
+  cursor: col-resize;
+  z-index: 11;
+
+  &:hover {
+    background-color: var(--md-ref-palette-primary70);
+  }
 }
 
 .note-right-edge {
   position: absolute;
   top: 0;
   right: -1px;
-  width: 5px;
+  width: 6px;
   height: 100%;
   cursor: ew-resize;
+  z-index: 11;
+
+  &:hover {
+    background-color: var(--md-ref-palette-primary70);
+  }
 }
 
 .note-lyric-input {
   position: absolute;
   bottom: 0;
-  font-weight: 700;
-  min-width: 3rem;
-  max-width: 6rem;
+  font-weight: 500;
+  min-width: 2rem;
+  max-width: 2rem;
   border: 0;
-  outline: 2px solid colors.$primary;
-  border-radius: 0.25rem;
+  background: rgba(255, 255, 255, 0.8);
+  outline: 2px var(--md-sys-on-primary-dark) solid;
+  border-radius: 4px;
+  z-index: 100;
 }
 </style>
diff --git a/src/components/Sing/SequencerPitch.vue b/src/components/Sing/SequencerPitch.vue
@@ -5,6 +5,7 @@
 <script setup lang="ts">
 import { ref, watch, computed } from "vue";
 import * as PIXI from "pixi.js";
+import { argbFromHex } from "@material/material-color-utilities";
 import { useStore } from "@/store";
 import { frequencyToNoteNumber, secondToTick } from "@/sing/domain";
 import { noteNumberToBaseY, tickToBaseX } from "@/sing/viewHelper";
@@ -28,7 +29,13 @@ type PitchLine = {
   readonly lineStrip: LineStrip;
 };
 
-const pitchLineColor = [0.647, 0.831, 0.678, 1]; // RGBA
+const argb = argbFromHex("#819683");
+const pitchLineColor = [
+  ((argb >> 16) & 0xff) / 255, // Red
+  ((argb >> 8) & 0xff) / 255, // Green
+  (argb & 0xff) / 255, // Blue
+  ((argb >> 24) & 0xff) / 255, // Alpha
+];
 const pitchLineWidth = 1.5;
 
 const props = defineProps<{ offsetX: number; offsetY: number }>();
@@ -235,6 +242,8 @@ onMountedOrActivated(() => {
     view: canvasElement,
     backgroundAlpha: 0,
     antialias: true,
+    resolution: window.devicePixelRatio || 1,
+    autoDensity: true,
   });
   stage = new PIXI.Container();