Merge branch 'hqyDev' of http://git.dayaedu.com/lex/classroom-instruments into jenkins

src/components/Metronome/Metronome.vue

@@ -237,14 +237,6 @@ const beatSymbolOpt = [
     class: 'beatSymbolOptItem'
   }
 ];
-/* 拖动状态 */
-const preInfo = reactive({
-  preBoundary: 0,
-  offsetX: 0,
-  isMin: false,
-  isMax: false
-});
-
 const { volumeNum, playState, speedNum, startPlay, pausePlay } = useMetronome(
   beatVal,
   beatSymbol
@@ -296,86 +288,26 @@ function scalcToSpeed(scalc: number) {
   return Math.round((scalc * 150) / 100 + 50);
 }
 const handleclickCanvas = (e: MouseEvent) => {
-  const eleRect = mycanvasDom.value!.getBoundingClientRect();
-  const widthDot = eleRect.width;
-  const heightDot = eleRect.height;
-  let scalc = 0;
-  const offsetX = e.offsetX;
-  const offsetY = e.offsetY;
-  if (offsetX > widthDot / 2) {
-    // 开始算百分比
-    scalc = (offsetY / heightDot) * 50;
-  } else {
-    scalc = ((1 - offsetY / heightDot) / 2) * 100 + 50;
-  }
-  speedNum.value = scalcToSpeed(scalc);
+  const circle = mycanvasDom.value!.getBoundingClientRect();
+  const centerX = circle.left + circle.width / 2;
+  const centerY = circle.top + circle.height / 2;
+  const clickX = e.clientX;
+  const clickY = e.clientY;
+  const angle = Math.atan2(clickY - centerY, clickX - centerX);
+  const percentage = (angle * (180 / Math.PI) + 180) / 360;
+  const scalc = Math.round(percentage * 100) - 25;
+  speedNum.value = scalcToSpeed(scalc < 0 ? 100 + scalc : scalc);
 };
 function handleDotMousedown() {
   function onMouseup() {
     mycanvasDom.value!.removeEventListener('mousemove', onMousemove);
     document.removeEventListener('mouseup', onMouseup);
-    preInfo.preBoundary = 0;
-    preInfo.offsetX = 0;
-    preInfo.isMin = false;
-    preInfo.isMax = false;
   }
-  preInfo.preBoundary = 0;
   mycanvasDom.value!.addEventListener('mousemove', onMousemove);
   document.addEventListener('mouseup', onMouseup);
 }
 function onMousemove(e: MouseEvent) {
-  // 中心点 是 130 14
-  const eleRect = mycanvasDom.value!.getBoundingClientRect();
-  const widthDot = eleRect.width;
-  const heightDot = eleRect.height;
-  let scalc = 0;
-  const offsetX = e.offsetX;
-  const offsetY = e.offsetY;
-  // 这里在判断一下
-  const isRight = offsetX - preInfo.offsetX > 0;
-  if (offsetX > widthDot / 2) {
-    // 开始算百分比
-    scalc = (offsetY / heightDot) * 50;
-  } else {
-    scalc = ((1 - offsetY / heightDot) / 2) * 100 + 50;
-  }
-  //  先判断往左 往右
-  if (isRight) {
-    if (scalc - preInfo.preBoundary < -90) {
-      scalc = 100;
-      preInfo.isMax = true;
-      speedNum.value = scalcToSpeed(scalc);
-      return;
-    }
-  } else {
-    // 往左
-    if (scalc - preInfo.preBoundary > 90) {
-      if (scalc > 75 && preInfo.isMin) {
-        return;
-      }
-      preInfo.isMin = true;
-      scalc = 0;
-      speedNum.value = scalcToSpeed(scalc);
-      return;
-    }
-  }
-  if (preInfo.isMin && scalc > 75) {
-    return;
-  }
-  if (preInfo.isMin && scalc < 75) {
-    preInfo.isMin = false;
-    return;
-  }
-  if (preInfo.isMax && scalc < 25) {
-    return;
-  }
-  if (preInfo.isMax && scalc > 25) {
-    preInfo.isMax = false;
-    return;
-  }
-  speedNum.value = scalcToSpeed(scalc);
-  preInfo.preBoundary = scalc;
-  preInfo.offsetX = offsetX;
+  handleclickCanvas(e);
 }
 // 根据百分比画圆
 function getCircleBar(steps: number) {
@@ -700,6 +632,9 @@ defineExpose({
     padding: 0 9Px !important;
     display: flex;
     justify-content: center;
+    &.n-base-select-option::before {
+      transition: initial;
+    }
     &.n-base-select-option--selected {
       .n-base-select-option__content {
         color: #47a7fe;
@@ -725,6 +660,9 @@ defineExpose({
   .beatSymbolOptItem {
     display: flex;
     justify-content: center;
+    &.n-base-select-option::before {
+      transition: initial;
+    }
     &.n-base-select-option--selected {
       .n-base-select-option__content {
         .beatSymbolImg {

src/components/Metronome/MetronomeBox.vue

@@ -54,6 +54,8 @@
     v-model:show="metronomeShow"
     :class="[dragClass, windowMet ? 'transformOrigin' : '']"
     :display-directive="'show'"
+    @mask-click="handleCloseMet"
+    @esc="handleCloseMet"
     @after-enter="
       () => {
         animationEnds = true;

src/components/Metronome/useMetronome.ts

@@ -85,7 +85,7 @@ function useHandleAudio(files: [File | Blob | string, File | Blob | string]) {
           : (mergeAudio = nowBuff);
         mergeAudio = crunker.padAudio(
           mergeAudio,
-          mergeAudio.duration - 0.01, // 预留0.01的安全距离 他这里有bug
+          mergeAudio.duration - 0.01, // 预留0.01的安全距离 crunker这里有bug duration时长精确度不够
           (timeNum || 1) / playbackRate - nowBuff.duration
         );
       });