merge

osmd-extended

@@ -1 +1 @@
-Subproject commit 29530cc1c43eaab54fd7d800dc687fd748912f5d
+Subproject commit d5173c1f79e6faffbd7a6a8c32f89cdf735399fa

src/view/rhythm/index.module.less

@@ -0,0 +1,103 @@
+.rhythm{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .titImg{
+        position: absolute;
+        left: 30px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 100px;
+        height: 38px;
+        background: url("./imgs/tit.png") no-repeat;
+        background-size: 100% 100%;
+    }
+    .rhythmBox{
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .rhythmImg{
+            width: 50px;
+            height: 50px;
+            background: #FFFFFF;
+            border-radius: 14px;
+            background-size: 44px 44px;
+            background-repeat: no-repeat;
+            background-position: center;
+            margin-right: 14px;
+            &:first-child{
+                width: 74px;
+                height: 74px;
+                background-size: 74px 74px;
+                background-color: #35A8FF;
+                border-radius: 20px;
+                outline: 3px solid #FFFFFF;
+            }
+            &:last-child{
+                margin-right: 0;
+            }
+            &.rhythm1{
+                background-image: url("./imgs/1.png");
+            }
+            &.rhythm2{
+                background-image: url("./imgs/2.png");
+            }
+            &.rhythm3{
+                background-image: url("./imgs/3.png");
+            }
+            &.rhythm4{
+                background-image: url("./imgs/4.png");
+            }
+            &.rhythm5{
+                background-image: url("./imgs/5.png");
+            }
+            &.rhythm6{
+                background-image: url("./imgs/6.png");
+            }
+            &.rhythm7{
+                background-image: url("./imgs/7.png");
+            }
+        }
+    }
+    &.vertical{
+        overflow: hidden;
+        background: linear-gradient( 180deg, #AFE8FF 0%, #D9F3FE 100%);
+        .titImg{
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .rhythmBox{
+            position: initial;
+            transform: initial;
+            margin-top: 68px;
+            flex-wrap: wrap;
+            .rhythmImg{
+                margin-bottom: 20px;
+                width: 40px;
+                height: 40px;
+                border-radius: 10px;
+                background-size: 36px 36px;
+                &:nth-child(4){
+                    margin-right: 0;
+                }
+                &:nth-child(7){
+                    margin-right: 0;
+                }
+                &:first-child{
+                    margin-left: 20px;
+                    margin-right: 20px;
+                    width: 110px;
+                    height: 110px;
+                    background-size: 110px 110px;
+                    border-radius: 28px;
+                    outline: 4px solid #FFFFFF;
+                }
+            }
+        }
+    }
+}

src/view/rhythm/index.tsx

@@ -0,0 +1,64 @@
+import { computed, defineComponent, onBeforeMount, ref } from "vue"
+import styles from "./index.module.less"
+import state from "/src/state"
+import { headTopData } from "/src/page-instrument/header-top"
+
+export default defineComponent({
+   name: "rhythm",
+   setup(props, { emit, expose }) {
+      type rhythmData = {
+         isDot: boolean
+         denominator: number
+         isRestFlag: boolean
+         rhythmImg: string
+      }
+      const rhythmImgObj: Record<string, any> = {
+         "1/1": "1",
+         "1/2": "2",
+         "1/4": "3",
+         "1/8": "4",
+         "1/16": "5",
+         "1/32": "6",
+         "1/1.": "1",
+         "1/2.": "2",
+         "1/4.": "3",
+         "1/8.": "4",
+         "1/16.": "5",
+         "1/32.": "6",
+         rest: "7"
+      }
+      const rhythmData = ref<rhythmData[]>([])
+      const actRhythmData = computed<rhythmData[]>(() => {
+         return rhythmData.value.slice(state.activeNoteIndex, state.activeNoteIndex + 7)
+      })
+      function initRhythmData() {
+         rhythmData.value = state.times.map(item => {
+            const noteElement = item.noteElement
+            const isDot = !!noteElement?.DotsXml
+            const denominator = noteElement?.typeLength?.denominator || 4
+            const isRestFlag = !!noteElement?.isRestFlag
+            return {
+               isDot,
+               denominator,
+               isRestFlag,
+               rhythmImg: isRestFlag ? "rest" : `1/${denominator}${isDot ? "." : ""}`
+            }
+         })
+      }
+      initRhythmData()
+      return () => {
+         return (
+            <>
+               <div class={[styles.rhythm, headTopData.rhythmModeDirection === "vertical" && styles.vertical]}>
+                  <div class={styles.titImg}></div>
+                  <div class={styles.rhythmBox}>
+                     {actRhythmData.value.map(item => {
+                        return <div class={[styles.rhythmImg, styles[`rhythm${rhythmImgObj[item.rhythmImg]}`]]}></div>
+                     })}
+                  </div>
+               </div>
+            </>
+         )
+      }
+   }
+})