课堂展示：画布拖选问题修复

src/renderer/src/components/whiteboard/whiteboard.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="whiteboart-container" :style="{ height: height + 'px' }">
-    <div class="canvasBox" ref="box" @mouseleave="handleMouseLeave" ></div>
+    <div class="canvasBox" ref="box" 
+      @mousedown="handleMouseDown"
+      @mousemove="handleMouseMove"
+      @mouseup="handleMouseUp"
+      @mouseleave="handleMouseLeave" 
+    
+    ></div>
 
     <div class="footerLeft" @click.stop
       :style="type == 'design' ? ['top: 10px', 'justify-content: space-between'] : ['bottom: 10px', 'justify-content: center']">
@@ -352,6 +358,10 @@ const currentType = ref('selection')
 
 // dom节点
 const box = ref(null)
+const  startX= ref(0)
+const  startY= ref(0) 
+const  endX= ref(0) 
+const  endY= ref(0) 
 
 // 应用实例
 let app = null
@@ -745,6 +755,7 @@ const init = () => {
   })
   // 监听元素激活事件
   app.on('activeElementChange', element => {
+    console.log('点击元素 监听 activeElementChange-----------', element)
     if (activeElement.value) {
       activeElement.value.off('elementRotateChange', onElementRotateChange)
     }
@@ -794,44 +805,35 @@ const init = () => {
   })
 }
 
+const isDragging = ref(false);
 /**
  * 课堂展示-鼠标离开白板监听事件：该事件是避免，选中状态，在其他地方点击、后退、删除等事件，会删除白板内选中的元素
  */
 const handleMouseLeave = () => {
   console.log('离开白板')
-  // 清除激活项
-  // app.cancelActiveElement()
+  // 清除激活项--点击事件的激活项
+  app.cancelActiveElement()
 
-  const rect = proxy.$refs.box.getBoundingClientRect();
-      const x = event.clientX - rect.left;
-      const y = event.clientY - rect.top;
-      const selectedShape = this.shapes.find(shape => {
-        return x >= shape.x && x <= shape.x + shape.width && y >= shape.y && y <= shape.y + shape.height;
-      });
-      if (selectedShape) {
-        console.log('选中的元素:', selectedShape);
-      }
- 
-  // 当前操作类型
-  // console.log("当前操作类型,默认 selection：", currentType.value)
-
-  // // 是否有 当前激活的元素？有则取消激活
-  // console.log("当前激活的元素：", activeElement.value)
-  // // if (activeElement.value) {
-  // //   console.log("取消激活")
-  // //   activeElement.value = null
-  // // }
-
-  // // // 是否有当前多选的元素？有则取消多选
-  // console.log("当前多选的元素：", selectedElements.value)
-  // if( selectedElements.value.length > 0) {
-  //   console.log("取消多选")
-  //   selectedElements.value = []
-  // }
-
-  // const canvas = box.value;
-  // canvas.blur(); // 失焦
+  // this.isDragging = false;
+  //     this.drawRectangle();
 };
+const handleMouseDown = (event) =>{
+  // this.isDragging = true;
+  // this.startX = event.clientX;
+  // this.startY = event.clientY;
+}
+const  handleMouseMove =(event)=> {
+  // if (this.isDragging) {
+  //   this.endX = event.clientX;
+  //   this.endY = event.clientY;
+  //   this.drawRectangle();
+  // }
+}
+const handleMouseUp = () =>{
+  // this.isDragging = false;
+  // this.drawRectangle();
+}
+
 
 // 暴露方法
 defineExpose({