媒体库-优化涂鸦功能

src/views/demo/system/mediaLibrary/index.vue

@@ -281,6 +281,7 @@
       :maskClosable="false"
     >
       <Path
+        :pathDivShow="pathDivShow"
         :allImageDataList="allImageDataList"
         :nowShowImageData="nowShowImageData"
         :floderName="floderName"
@@ -306,6 +307,7 @@
 
     <Path
       v-if="pathDivShow"
+      :pathDivShow="pathDivShow"
       :allImageDataList="allImageDataList"
       :nowShowImageData="nowShowImageData"
       :floderName="floderName"
@@ -854,7 +856,7 @@
   // 刷新
   function handleSuccessPath(value) {
     setTimeout(() => {
-      pathDivShow.value ? openPathModal(value) : showPathDiv(value);
+      pathDivShow.value ? showPathDiv(value) : openPathModal(value);
       // openPathModal(value);
       reload();
     }, 500);

src/views/demo/system/mediaLibrary/path/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="pathModal">
+  <div
+    class="pathModal"
+    :style="{
+      height: props.pathDivShow ? '100%' : '100vh',
+    }"
+  >
     <!-- 左侧目录 -->
     <div
       class="leftMenuDiv"
@@ -51,7 +56,7 @@
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage, createConfirm } = useMessage();
 
-  const props = defineProps(['allImageDataList', 'nowShowImageData', 'floderName']);
+  const props = defineProps(['allImageDataList', 'nowShowImageData', 'floderName', 'pathDivShow']);
   const emits = defineEmits(['closePathModal', 'handleSuccessPath']);
   // 地图宽度
   const dynamicWidth = computed(() => {
@@ -139,7 +144,6 @@
     position: relative;
     display: flex;
     width: 100%;
-    height: 100%;
 
     .leftMenuDiv {
       position: relative;

src/views/demo/system/mediaLibrary/path/pathImageInfo.vue

@@ -105,7 +105,7 @@
             v-if="!hideOrShowGraffitiFlag"
             style="color: #595959"
           />
-          <div style="position: absolute; bottom: -6px; right: -4px; pointer-events: none">
+          <div style="position: absolute; bottom: -12px; right: -5px; pointer-events: none">
             <div
               v-html="
                 `${
@@ -769,7 +769,7 @@
   function refresh() {
     scale.value = 0.9;
     rotationAngle.value = 0;
-    graffitiFlag.value = false;
+    // graffitiFlag.value = false;
     getImageWidthAndHeight();
     // 复位
     const dragDocument: any = document.querySelector('.dragModal');
@@ -777,6 +777,7 @@
       dragDocument.style.left = 0 + 'px';
       dragDocument.style.top = 0 + 'px';
     }
+    document.body.style.cursor = 'default';
   }
   // 移动到中心位置
   function handlerLocation() {
@@ -809,6 +810,7 @@
   // 选择当前展示图片-----------------------------------------------
   function setNowShowImageData(value) {
     emits('setNowShowImageData', value);
+    graffitiFlag.value = false;
     refresh();
   }
 
@@ -817,6 +819,7 @@
   const graffitiFlag = ref(false);
   // 设置鼠标格式
   function setGraffiti() {
+    refresh();
     graffitiFlag.value = !graffitiFlag.value;
     if (graffitiFlag.value) {
       document.body.style.cursor = 'crosshair';
@@ -960,7 +963,23 @@
 
   // 鼠标按下
   function onMouseDown(event) {
-    if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
+    if (!graffitiFlag.value) {
+      {
+        // 拖动
+        const dragDocument: any = document.querySelector('.dragModal');
+        isDragging.value = true;
+        initialMouseX = event.clientX;
+        initialMouseY = event.clientY;
+        initialDocumentX = dragDocument.offsetLeft;
+        initialDocumentY = dragDocument.offsetTop;
+        dragDocument.style.cursor = 'grabbing';
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+      }
+    } else if (
+      graffitiFlag.value &&
+      (graffitis.value.length == 0 || !graffitis.value.some((item) => item.status != 'success'))
+    ) {
       // 涂鸦
       if (nowGraffiti.value != -1) return;
       if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
@@ -980,75 +999,66 @@
         status: 'edit',
       });
       graffitisClone.value = cloneDeep(graffitis.value);
-      window.addEventListener('mousemove', onMouseMove);
-      window.addEventListener('mouseup', onMouseUp);
+      window.addEventListener('mousemove', onMouseMoveGraffit);
+      window.addEventListener('mouseup', onMouseUpGraffit);
+    }
+  }
+
+  // 鼠标移动-涂鸦
+  function onMouseMoveGraffit(event) {
+    // 涂鸦
+    const rect = mouseCanvasRef.value.getBoundingClientRect();
+    if (!isDragging.value) return;
+    endX = event.x - rect.x;
+    endY = event.y - rect.y;
+    if (endX < 0 && endY < 0) {
+      endX = startX;
+      endY = startY;
+    }
+    setMouseData();
+  }
+
+  // 鼠标松开-涂鸦
+  function onMouseUpGraffit(event) {
+    // 涂鸦
+    if (!isDragging.value) return;
+    const rect = mouseCanvasRef.value.getBoundingClientRect();
+    endX = event.x - rect.x;
+    endY = event.y - rect.y;
+    if (endX < 0 && endY < 0) {
+      endX = startX;
+      endY = startY;
+    }
+    isDragging.value = false;
+    if (event.x > rect.right || event.y > rect.bottom) {
+      graffitis.value.splice(graffitis.value.length - 1, 1);
+      nowGraffiti.value = -1;
     } else {
-      // 拖动
-      const dragDocument: any = document.querySelector('.dragModal');
-      isDragging.value = true;
-      initialMouseX = event.clientX;
-      initialMouseY = event.clientY;
-      initialDocumentX = dragDocument.offsetLeft;
-      initialDocumentY = dragDocument.offsetTop;
-      dragDocument.style.cursor = 'grabbing';
-      window.addEventListener('mousemove', onMouseMove);
-      window.addEventListener('mouseup', onMouseUp);
+      setMouseData();
+      nowGraffiti.value = graffitis.value.length - 1;
     }
+    window.removeEventListener('mousemove', onMouseMoveGraffit);
+    window.removeEventListener('mouseup', onMouseUpGraffit);
   }
+
   // 鼠标移动
   function onMouseMove(event) {
-    if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
-      // 涂鸦
-      const rect = mouseCanvasRef.value.getBoundingClientRect();
-      if (!isDragging.value) return;
-      endX = event.x - rect.x;
-      endY = event.y - rect.y;
-      if (endX < 0 && endY < 0) {
-        endX = startX;
-        endY = startY;
-      }
-      setMouseData();
-    } else {
-      // 拖动
-      const dragDocument: any = document.querySelector('.dragModal');
-      if (isDragging.value) {
-        const deltaX = event.clientX - initialMouseX;
-        const deltaY = event.clientY - initialMouseY;
-        dragDocument.style.left = initialDocumentX + deltaX + 'px';
-        dragDocument.style.top = initialDocumentY + deltaY + 'px';
-      }
+    // 拖动
+    const dragDocument: any = document.querySelector('.dragModal');
+    if (isDragging.value) {
+      const deltaX = event.clientX - initialMouseX;
+      const deltaY = event.clientY - initialMouseY;
+      dragDocument.style.left = initialDocumentX + deltaX + 'px';
+      dragDocument.style.top = initialDocumentY + deltaY + 'px';
     }
   }
   // 鼠标松开
   function onMouseUp(event) {
-    if (graffitiFlag.value || graffitis.value.some((item) => item.status != 'success')) {
-      // 涂鸦
-      if (!isDragging.value) return;
-      const rect = mouseCanvasRef.value.getBoundingClientRect();
-
-      endX = event.x - rect.x;
-      endY = event.y - rect.y;
-      if (endX < 0 && endY < 0) {
-        endX = startX;
-        endY = startY;
-      }
-      isDragging.value = false;
-      if (event.x > rect.right || event.y > rect.bottom) {
-        graffitis.value.splice(graffitis.value.length - 1, 1);
-        nowGraffiti.value = -1;
-      } else {
-        setMouseData();
-        nowGraffiti.value = graffitis.value.length - 1;
-      }
-      window.removeEventListener('mousemove', onMouseMove);
-      window.removeEventListener('mouseup', onMouseUp);
-    } else {
-      // 拖动
-      const dragDocument: any = document.querySelector('.dragModal');
-      isDragging.value = false;
-      if (dragDocument) {
-        dragDocument.style.cursor = 'default';
-      }
+    // 拖动
+    const dragDocument: any = document.querySelector('.dragModal');
+    isDragging.value = false;
+    if (dragDocument) {
+      dragDocument.style.cursor = 'default';
     }
   }
   // 鼠标滚轮
@@ -1083,10 +1093,12 @@
   // 鼠标聚焦
   function mouseenter(rect, type) {
     if (graffitiFlag.value) {
+      // 鼠标聚焦状态
       if (rect.status != 'edit') {
         rect.status = 'mouse';
         document.body.style.cursor = 'pointer';
       }
+      // 编辑状态
       if (rect.status == 'edit') {
         if (type == 'top' || type == 'bottom') {
           document.body.style.cursor = 'ns-resize';
@@ -1110,10 +1122,8 @@
         if (rect.status == 'mouse') {
           rect.status = 'success';
         }
-        if (graffitiFlag.value) {
+        if (rect.status == 'edit') {
           document.body.style.cursor = 'crosshair';
-        } else {
-          document.body.style.cursor = 'pointer';
         }
       }
     }

src/views/demo/system/mediaLibrary/preview/previewImage.vue

@@ -580,6 +580,7 @@
   // 选择
   function chooseNowPreviewRecord(value) {
     emits('chooseNowPreviewRecord', value);
+    graffitiFlag.value = false;
     refresh();
   }
   // 刷新表格
@@ -656,7 +657,7 @@
   function refresh() {
     scale.value = 1;
     rotationAngle.value = 0;
-    graffitiFlag.value = false;
+    // graffitiFlag.value = false;
     getImageWidthAndHeight();
     // 复位
     const dragDocument: any = document.querySelector('.dragModal');
@@ -664,6 +665,7 @@
       dragDocument.style.left = 0 + 'px';
       dragDocument.style.top = 0 + 'px';
     }
+    document.body.style.cursor = 'default';
   }
 
   // 删除
@@ -764,6 +766,7 @@
   const nowMouseGraffiti = ref(0);
   // 设置鼠标格式
   function setGraffiti() {
+    refresh();
     graffitiFlag.value = !graffitiFlag.value;
     if (graffitiFlag.value) {
       document.body.style.cursor = 'crosshair';
@@ -842,7 +845,21 @@
   const mouseCanvasRef = ref();
   // 鼠标按下
   function onMouseDown(event) {
-    if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
+    if (!graffitiFlag.value) {
+      // 拖动
+      const dragDocument: any = document.querySelector('.dragModal');
+      isDragging.value = true;
+      initialMouseX = event.clientX;
+      initialMouseY = event.clientY;
+      initialDocumentX = dragDocument.offsetLeft;
+      initialDocumentY = dragDocument.offsetTop;
+      dragDocument.style.cursor = 'grabbing';
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('mouseup', onMouseUp);
+    } else if (
+      graffitiFlag.value &&
+      (graffitis.value.length == 0 || !graffitis.value?.some((item) => item.status != 'success'))
+    ) {
       // 涂鸦
       if (nowGraffiti.value != -1) return;
       if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
@@ -862,74 +879,65 @@
         status: 'edit',
       });
       graffitisClone.value = cloneDeep(graffitis.value);
-      window.addEventListener('mousemove', onMouseMove);
-      window.addEventListener('mouseup', onMouseUp);
+      window.addEventListener('mousemove', onMouseMoveGraffit);
+      window.addEventListener('mouseup', onMouseUpGraffit);
+    }
+  }
+
+  // 鼠标移动-涂鸦
+  function onMouseMoveGraffit(event) {
+    // 涂鸦
+    const rect = mouseCanvasRef.value.getBoundingClientRect();
+    if (!isDragging.value) return;
+    endX = event.x - rect.x;
+    endY = event.y - rect.y;
+    if (endX < 0 && endY < 0) {
+      endX = startX;
+      endY = startY;
+    }
+    setMouseData();
+  }
+  // 鼠标松开-涂鸦
+  function onMouseUpGraffit(event) {
+    // 涂鸦
+    if (!isDragging.value) return;
+    const rect = mouseCanvasRef.value.getBoundingClientRect();
+    endX = event.x - rect.x;
+    endY = event.y - rect.y;
+    if (endX < 0 && endY < 0) {
+      endX = startX;
+      endY = startY;
+    }
+    isDragging.value = false;
+    if (event.x > rect.right || event.y > rect.bottom) {
+      graffitis.value.splice(graffitis.value.length - 1, 1);
+      nowGraffiti.value = -1;
     } else {
-      // 拖动
-      const dragDocument: any = document.querySelector('.dragModal');
-      isDragging.value = true;
-      initialMouseX = event.clientX;
-      initialMouseY = event.clientY;
-      initialDocumentX = dragDocument.offsetLeft;
-      initialDocumentY = dragDocument.offsetTop;
-      dragDocument.style.cursor = 'grabbing';
-      window.addEventListener('mousemove', onMouseMove);
-      window.addEventListener('mouseup', onMouseUp);
+      setMouseData();
+      nowGraffiti.value = graffitis.value.length - 1;
     }
+    window.removeEventListener('mousemove', onMouseMoveGraffit);
+    window.removeEventListener('mouseup', onMouseUpGraffit);
   }
-  // 鼠标移动
+
+  // 鼠标移动-拖动
   function onMouseMove(event) {
-    if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
-      // 涂鸦
-      const rect = mouseCanvasRef.value.getBoundingClientRect();
-      if (!isDragging.value) return;
-      endX = event.x - rect.x;
-      endY = event.y - rect.y;
-      if (endX < 0 && endY < 0) {
-        endX = startX;
-        endY = startY;
-      }
-      setMouseData();
-    } else {
-      // 拖动
-      const dragDocument: any = document.querySelector('.dragModal');
-      if (isDragging.value) {
-        const deltaX = event.clientX - initialMouseX;
-        const deltaY = event.clientY - initialMouseY;
-        dragDocument.style.left = initialDocumentX + deltaX + 'px';
-        dragDocument.style.top = initialDocumentY + deltaY + 'px';
-      }
+    // 拖动
+    const dragDocument: any = document.querySelector('.dragModal');
+    if (isDragging.value) {
+      const deltaX = event.clientX - initialMouseX;
+      const deltaY = event.clientY - initialMouseY;
+      dragDocument.style.left = initialDocumentX + deltaX + 'px';
+      dragDocument.style.top = initialDocumentY + deltaY + 'px';
     }
   }
-  // 鼠标松开
+  // 鼠标松开-拖动
   function onMouseUp(event) {
-    if (graffitiFlag.value || graffitis.value?.some((item) => item.status != 'success')) {
-      // 涂鸦
-      if (!isDragging.value) return;
-      const rect = mouseCanvasRef.value.getBoundingClientRect();
-      endX = event.x - rect.x;
-      endY = event.y - rect.y;
-      if (endX < 0 && endY < 0) {
-        endX = startX;
-        endY = startY;
-      }
-      isDragging.value = false;
-      if (event.x > rect.right || event.y > rect.bottom) {
-        graffitis.value.splice(graffitis.value.length - 1, 1);
-        nowGraffiti.value = -1;
-      } else {
-        setMouseData();
-        nowGraffiti.value = graffitis.value.length - 1;
-      }
-      window.removeEventListener('mousemove', onMouseMove);
-      window.removeEventListener('mouseup', onMouseUp);
-    } else {
-      // 拖动
-      const dragDocument: any = document.querySelector('.dragModal');
-      isDragging.value = false;
-      if (dragDocument) {
-        dragDocument.style.cursor = 'default';
-      }
+    // 拖动
+    const dragDocument: any = document.querySelector('.dragModal');
+    isDragging.value = false;
+    if (dragDocument) {
+      dragDocument.style.cursor = 'default';
     }
   }
 
@@ -960,10 +968,12 @@
   // 鼠标聚焦
   function mouseenter(rect, type) {
     if (graffitiFlag.value) {
+      // 鼠标聚焦状态
       if (rect.status != 'edit') {
         rect.status = 'mouse';
         document.body.style.cursor = 'pointer';
       }
+      // 编辑状态
       if (rect.status == 'edit') {
         if (type == 'top' || type == 'bottom') {
           document.body.style.cursor = 'ns-resize';
@@ -987,10 +997,8 @@
         if (rect.status == 'mouse') {
           rect.status = 'success';
         }
-        if (graffitiFlag.value) {
+        if (rect.status == 'edit') {
           document.body.style.cursor = 'crosshair';
-        } else {
-          document.body.style.cursor = 'pointer';
         }
       }
     }