Halaman utama Jelajahi Bantuan
Masuk
huangqiyong
/
classroom
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

Merge branch 'iteration-temp-http' of http://git.dayaedu.com/huangqiyong/classroom into dev

黄琪勇 10 bulan lalu
induk
510b537952 2d67c15a28
melakukan
b218babfd4
4 mengubah file dengan 217 tambahan dan 22 penghapusan
Unified View Tampilkan Statistik Diff
  1. 167 0
      public/osmd/index.html
  2. 1 0
      public/osmd/opensheetmusicdisplay.min.js
  3. 28 21
      src/views/cloudPractice/cloudPractice.tsx
  4. 21 1
      src/views/cloudPractice/index.module.scss

+ 167 - 0
public/osmd/index.html
Tampilan Berkas 

@@ -0,0 +1,167 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <script src="./opensheetmusicdisplay.min.js"></script>
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    body {
 
+      padding-bottom: 60px;
 
+      height: 600px;
 
+      overflow: hidden;
 
+    }
 
+
 
+    /* .vf-text {
 
+      display: none;
 
+    } */
 
+
 
+    #cursorImg-0 {
 
+      display: none;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="osmdContainer" />
 
+  <script>
 
+    var osmd = new opensheetmusicdisplay.OpenSheetMusicDisplay("osmdContainer");
 
+    osmd.setOptions({
 
+      backend: "svg",
 
+      // drawTitle: false,
 
+      // drawPartNames: false,
 
+      // drawLyricist: false,
 
+      drawTitle: false,
 
+      drawPartNames: false,
 
+      drawLyricist: false,
 
+      followCursor: false,
 
+      autoResize: true,
 
+      drawSubtitle: false,
 
+      drawTitle: false,
 
+      autoBeam: true,
 
+      drawMetronomeMarks: false,
 
+      drawMeasureNumbers: false,
 
+      drawComposer: false,
 
+      autoGenerateMutipleRestMeasuresFromRestMeasures: true,
 
+      autoGenerateMultipleRestMeasuresFromRestMeasures: true,
 
+    });
 
+    osmd.EngravingRules.RenderMultipleRestMeasures = true;
 
+    osmd.EngravingRules.CompactMode = true;
 
+    osmd.EngravingRules.PageTopMarginNarrow = 6.0; // for compact mode
 
+    osmd.EngravingRules.PageBottomMargin = 15.0;
 
+    osmd.EngravingRules.PageLeftMargin = 1.0
 
+    osmd.EngravingRules.PageRightMargin = 1.0
 
+
 
+    // console.log('osmd.EngravingRules', osmd.EngravingRules)
 
+    // osmd.EngravingRules.StaffDistance = 1.0;
 
+    // osmd.EngravingRules.BetweenStaffDistance = 1.0;
 
+    // osmd.EngravingRules.MinimumStaffLineDistance = 1.0;
 
+    //osmd.EngravingRules.MinSkyBottomDistBetweenStaves = 1.0; // default 1.0. this can cause collisions with slurs and dynamics sometimes
 
+    osmd.EngravingRules.MinSkyBottomDistBetweenSystems = 3.0; // default 5.0
 
+    // note that osmd.EngravingRules === osmd.rules, since it's passed as a reference
 
+
 
+
 
+    osmd.EngravingRules.MinimumDistanceBetweenSystems = 1;
 
+    osmd.setPageFormat('794x1123')
 
+    // osmd.setPageFormat('650x884')
 
+    function getSvgPngToSize(osmd) {
 
+      if (osmd) {
 
+        if (osmd.Drawer.Backends.length > 0) {
 
+          var imgList = []
 
+
 
+          for (var idx = 0, len = osmd.Drawer.Backends.length; idx < len; idx++) {
 
+            var backend = osmd.Drawer.Backends[idx]
 
+            var state = backend.ctx.state;
 
+            var width = backend.ctx.width / state.scale.x;
 
+            var height = backend.ctx.height / state.scale.y;
 
+            var cont = new XMLSerializer().serializeToString(
 
+              backend.ctx.svg
 
+            )
 
+
 
+            imgList.push({
 
+              img: cont,
 
+              width: width,
 
+              height: height,
 
+            })
 
+          }
 
+          return imgList
 
+        }
 
+      } else {
 
+        console.log('没有OSMD')
 
+      }
 
+    }
 
+    function render() {
 
+      osmd.render();
 
+      // console.log(getSvgPngToSize(osmd), 'getSvgPngToSize(osmd)')
 
+      window.parent.postMessage({
 
+        api: 'musicStaffRender',
 
+        loading: false,
 
+        osmdImg: getSvgPngToSize(osmd)
 
+      }, '*');
 
+    }
 
+
 
+    function renderXml(xmlUrl, partIndex, isComberRender) {
 
+      osmd
 
+        .load(xmlUrl)
 
+        .then(
 
+          function () {
 
+            // 是否合并显示
 
+            if (!isComberRender) {
 
+              for (let i = 0; i < osmd.Sheet.Instruments.length; i++) {
 
+                osmd.Sheet.Instruments[i].Visible = i === partIndex;
 
+              }
 
+            }
 
+
 
+            osmd.zoom = .5
 
+            render();
 
+          }
 
+        );
 
+    }
 
+    function resetRender(partIndex) {
 
+      for (let i = 0; i < osmd.Sheet.Instruments.length; i++) {
 
+        osmd.Sheet.Instruments[i].Visible = i === partIndex;
 
+      }
 
+      render();
 
+
 
+    }
 
+
 
+    function resetRenderPage(type, xmlUrl) {
 
+      let str = 'staff'
 
+      if (type === 'first') {
 
+        str = 'jianpu'
 
+        window.sett = {
 
+          keySignature: false,
 
+        };
 
+      } else if (type === 'fixed') {
 
+        str = 'jianpu'
 
+        window.sett = {
 
+          keySignature: true,
 
+        };
 
+      }
 
+
 
+      osmd.EngravingRules.DYMusicScoreType = str
 
+      // console.log(type, xmlUrl)
 
+      osmd
 
+        .load(xmlUrl)
 
+        .then(
 
+          function () {
 
+            // for (let i = 0; i < osmd.Sheet.Instruments.length; i++) {
 
+            //   // console.log(osmd.Sheet.Instruments[i].Name);
 
+            //   osmd.Sheet.Instruments[i].Visible = i === partIndex;
 
+            // }
 
+            osmd.zoom = .5
 
+            render();
 
+          }
 
+        );
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>

File diff ditekan karena terlalu besar
+ 1 - 0
public/osmd/opensheetmusicdisplay.min.js


+ 28 - 21
src/views/cloudPractice/cloudPractice.tsx
Tampilan Berkas 

@@ -218,7 +218,7 @@ export default defineComponent({
 
       }
 
       }
 
 
 
       const handleGetList = async () => {
 
       const handleGetList = async () => {
 
-         // state.listActive = 0;
 
+         state.listActive = 0
 
          // data.showPlayer = false;
 
          // data.showPlayer = false;
 
          // data.playState = 'pause';
 
          // data.playState = 'pause';
 
          document.querySelector(".musicList-container")?.scroll(0, 0)
 
          document.querySelector(".musicList-container")?.scroll(0, 0)
 
@@ -230,7 +230,7 @@ export default defineComponent({
 
 
 
       const musicIframeLoad = async () => {
 
       const musicIframeLoad = async () => {
 
          const iframeRef: any = document.getElementById("staffIframeRef")
 
          const iframeRef: any = document.getElementById("staffIframeRef")
 
-         if (iframeRef && iframeRef.contentWindow.renderXml) {
 
+         if (iframeRef && iframeRef.contentWindow?.renderXml) {
 
             const res = await requestOrigin.get(activeItem.value.xmlUrl, { mode: "cors" })
 
             const res = await requestOrigin.get(activeItem.value.xmlUrl, { mode: "cors" })
 
             const parseXmlInfo = getCustomInfo(res)
 
             const parseXmlInfo = getCustomInfo(res)
 
             const xml = formatXML(parseXmlInfo.parsedXML)
 
             const xml = formatXML(parseXmlInfo.parsedXML)
 
@@ -240,7 +240,7 @@ export default defineComponent({
 
       }
 
       }
 
       const resetRender = async () => {
 
       const resetRender = async () => {
 
          const iframeRef: any = document.getElementById("staffIframeRef")
 
          const iframeRef: any = document.getElementById("staffIframeRef")
 
-         if (iframeRef && iframeRef.contentWindow.renderXml) {
 
+         if (iframeRef && iframeRef.contentWindow?.renderXml) {
 
             const res = await requestOrigin.get(activeItem.value.xmlUrl, { mode: "cors" })
 
             const res = await requestOrigin.get(activeItem.value.xmlUrl, { mode: "cors" })
 
             const parseXmlInfo = getCustomInfo(res)
 
             const parseXmlInfo = getCustomInfo(res)
 
             const xml = formatXML(parseXmlInfo.parsedXML)
 
             const xml = formatXML(parseXmlInfo.parsedXML)
 
@@ -251,7 +251,8 @@ export default defineComponent({
 
 
 
       const renderStaff = async () => {
 
       const renderStaff = async () => {
 
          try {
 
          try {
 
-            state.iframeSrc = `${URL_TEACH_GYM}/osmd/index.html`
 
+            // ${location.origin}${location.pathname}
 
+            state.iframeSrc = `/osmd/index.html`
 
          } catch (error) {
 
          } catch (error) {
 
             //
 
             //
 
          }
 
          }
 
@@ -366,7 +367,13 @@ export default defineComponent({
 
 
 
                            <div class={styles.wrapList}>
 
                            <div class={styles.wrapList}>
 
                               {state.list.map((item: any, index: number) => (
 
                               {state.list.map((item: any, index: number) => (
 
-                                 <div class={[styles.item, index === state.listActive && styles.active]}>
 
+                                 <div
 
+                                    class={[styles.item, index === state.listActive && styles.active]}
 
+                                    onClick={() => {
 
+                                       state.listActive = index
 
+                                       resetRender()
 
+                                    }}
 
+                                 >
 
                                     <div class={styles.itemInfo}>
 
                                     <div class={styles.itemInfo}>
 
                                        <div class={styles.img}>
 
                                        <div class={styles.img}>
 
                                           <NImage
 
                                           <NImage
 
@@ -413,22 +420,22 @@ export default defineComponent({
 
                   <div class={styles.rightContainer}>
 
                   <div class={styles.rightContainer}>
 
                      <div class={styles.musicName}>{activeItem.value.name}</div>
 
                      <div class={styles.musicName}>{activeItem.value.name}</div>
 
                      <div class={styles.staffImgs}>
 
                      <div class={styles.staffImgs}>
 
-                        {musicImg.value.length > 0
 
-                           ? musicImg.value.map((item: string) => {
 
-                                return <img src={item} key={item} />
 
-                             })
 
-                           : state.iframeSrc && (
 
-                                <iframe
 
-                                   id="staffIframeRef"
 
-                                   style={{
 
-                                      opacity: loading.value ? 0 : 1,
 
-                                      width: "100%",
 
-                                      height: "100%"
 
-                                   }}
 
-                                   src={state.iframeSrc}
 
-                                   onLoad={musicIframeLoad}
 
-                                ></iframe>
 
-                             )}
 
+                        {state.iframeSrc || musicImg.value.length > 0 ? (
 
+                           <iframe
 
+                              id="staffIframeRef"
 
+                              style={{
 
+                                 // opacity: loading.value ? 0 : 1,
 
+                                 width: "100%",
 
+                                 height: "100%"
 
+                              }}
 
+                              src={state.iframeSrc}
 
+                              onLoad={musicIframeLoad}
 
+                           ></iframe>
 
+                        ) : (
 
+                           musicImg.value.map((item: string) => {
 
+                              return <img src={item} key={item} />
 
+                           })
 
+                        )}
 
                      </div>
 
                      </div>
 
 
 
                      <img
 
                      <img

+ 21 - 1
src/views/cloudPractice/index.module.scss
Tampilan Berkas 

@@ -344,13 +344,33 @@
 
 
 
    .staffImgs {
 
    .staffImgs {
 
       flex: 1;
 
       flex: 1;
 
-      overflow-y: auto;
 
+      // overflow-y: auto;
 
       height: 100%;
 
       height: 100%;
 
       padding: 0 30px;
 
       padding: 0 30px;
 
 
 
       & > img {
 
       & > img {
 
          width: 100%;
 
          width: 100%;
 
       }
 
       }
 
+
 
+      :global {
 
+         iframe {
 
+           // visibility: hidden;
 
+           border: none;
 
+           width: 100%;
 
+           // height: 500px;
 
+           flex: 1 auto;
 
+           overflow: hidden;
 
+     
+           body {
 
+             ::-webkit-scrollbar-thumb {
 
+               background-color: #efeff0;
 
+               border: 1px solid transparent;
 
+               background-clip: padding-box;
 
+               border-radius: 5px;
 
+             }
 
+           }
 
+         }
 
+       }
 
    }
 
    }
 
 
 
    .rightBtns {
 
    .rightBtns {

Beberapa file tidak ditampilkan karena terlalu banyak file yang berubah dalam diff ini