classroom/src/businessComponents/globalTools/globalTools.vue

<!--
* @FileDescription: 公用工具 - 【白板/批注】
* @Author: 王新雷
* @Date:2024年10月14日10:03:11
-->
<template>
   <div class="globalTools" :class="isPlay ? 'isPlay' : ''">
      <div :class="['iconTools', toolOpen ? 'hideTools' : '']" ref="iconToolsDom">
         <img @click="openTool" src="@/img/layout/icon-tool.png" />
      </div>

      <div :class="['expendTools', toolOpen ? 'showTools' : '']" ref="expendToolsDom">
         <img @click="openType('note')" src="@/img/layout/icon-note.png" />
         <img @click="openType('whiteboard')" class="iconWhiteboard" src="@/img/layout/icon-whiteboard.png" />
         <img @click="openTool" class="iconArrow" src="@/img/layout/g-arrow-right.png" />
      </div>
   </div>
   <pen
      :close="
         () => {
            penShow = false
         }
      "
      v-model="penShow"
   />
   <pen
      :is-white="true"
      :close="
         () => {
            whitePenShow = false
         }
      "
      v-model="whitePenShow"
   />
</template>

<script setup lang="ts">
import { baseSize, baseWidth, size } from "@/libs/rem"
import pen from "@/views/coursewarePlay/components/pen"
import { toolOpen, whitePenShow, penShow, isPlay } from "./globalTools"
import { onMounted, ref } from "vue"

const iconToolsDom = ref<HTMLDivElement>()
const expendToolsDom = ref<HTMLDivElement>()

function openTool() {
   if (isLock) return
   toolOpen.value = !toolOpen.value
}

function openType(type: "note" | "whiteboard") {
   console.log(type, "type")
   if (isLock) return
   if (type === "note") {
      penShow.value = true
   } else if (type === "whiteboard") {
      whitePenShow.value = true
   }
}

function computePos(type: "width" | "height", value: number | string) {
   const clientNum = type == "width" ? baseWidth : document.documentElement.clientHeight
   return typeof value === "string"
      ? {
           pos:
              type == "width"
                 ? ((clientNum - (parseInt(value) / 100) * clientNum) / 2 / baseSize).toFixed(5)
                 : (clientNum - (parseInt(value) / 100) * clientNum) / 2,
           unit: value
        }
      : {
           pos: type == "width" ? ((clientNum - value) / 2 / baseSize).toFixed(5) : (clientNum - value * (size / baseSize)) / 2,
           unit: (value / baseSize).toFixed(5) + "rem"
        }
}

/* 拖拽还没有兼容rem */
let isLock = false
function drag(el: HTMLElement) {
   function mousedown(e: MouseEvent) {
      e.stopPropagation()
      e.preventDefault()
      isLock = false
      const parentElement = el
      const parentElementRect = parentElement.getBoundingClientRect()
      // const downX = e.clientX
      const downY = e.clientY
      // const clientWidth = document.documentElement.clientWidth
      const clientHeight = document.documentElement.clientHeight
      // const minLeft = 0
      const minTop = 0
      // const maxLeft = clientWidth - parentElementRect.width
      const maxTop = clientHeight - parentElementRect.height
      function onMousemove(e: MouseEvent) {
         // let moveX = parentElementRect.left + (e.clientX - downX)
         let moveY = parentElementRect.top + (e.clientY - downY)
         // let moveY = e.clientY - downY
         // moveX = moveX < minLeft ? minLeft : moveX > maxLeft ? maxLeft : moveX
         moveY = moveY < minTop ? minTop : moveY > maxTop ? maxTop : moveY
         document.documentElement.style.setProperty("--toolTranslateY", `${moveY}px`)
         isLock = true
      }
      function onMouseup() {
         document.removeEventListener("mousemove", onMousemove)
         document.removeEventListener("mouseup", onMouseup)
      }
      document.addEventListener("mousemove", onMousemove)
      document.addEventListener("mouseup", onMouseup)
   }
   el.addEventListener("mousedown", mousedown, true)
}
//重新计算位置 居中
function refreshPos() {
   const posHeight = computePos("height", iconToolsDom.value?.clientHeight || 0)
   if (iconToolsDom.value) {
      document.documentElement.style.setProperty("--toolTranslateY", `${posHeight.pos}px`)
   }
}

onMounted(() => {
   drag(iconToolsDom.value!)
   drag(expendToolsDom.value!)
   refreshPos()

   iconToolsDom.value!.onclick = (e: any) => {
      e.stopPropagation()
   }
})
</script>

<style lang="scss" scoped>
.globalTools {
   &.isPlay {
      .iconTools,
      .expendTools {
         opacity: $opacity-disabled;
      }
   }
   .iconTools,
   .expendTools {
      position: fixed;
      right: 0;
      top: 0;
      transform: translateY(var(--toolTranslateY));
      // margin-top: -29px;
      z-index: 2999;
      padding: 8px 14px 8px 16px;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 200px 0px 0px 200px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-right-width: 0;
      cursor: pointer;
      // transition: transform 0.2s ease;
      img {
         width: 34px;
         height: 34px;
         -moz-user-select: none;
         /* 火狐浏览器 */
         -webkit-user-drag: none;
         /* 谷歌、Safari和Opera浏览器 */
         -webkit-user-select: none;
         /* 谷歌、Safari和Opera浏览器 */
         -ms-user-select: none;
         /* IE10+浏览器 */
         user-select: none;
         /* 通用 */
         -webkit-touch-callout: none;
         /* iOS Safari */
      }
   }

   .iconTools {
      // transition-delay: 0.2s;
   }

   .expendTools {
      // transform: translateX(100%);
      display: none;
      img {
         cursor: pointer;
      }
      .iconWhiteboard {
         margin: 0 30px;
      }
      .iconArrow {
         width: 28px;
         height: 28px;
      }
   }

   .hideTools {
      // transition: transform 0.2s ease;
      transform: translateY(var(--toolTranslateY));
      display: none;
   }

   .showTools {
      // transition: transform 0.2s ease;
      // transition-delay: 0.2s;
      transform: translateY(var(--toolTranslateY));
      display: block;
   }
}
</style>