1

src/components/CommonPreview.vue

@@ -97,6 +97,13 @@
 
         <main :class="['preview-main', { 'no-audit': !isShowAudit }]">
           <div class="preview-left"></div>
+          <!-- <div
+            id="selectable-area-preview"
+            @mousedown="startSelection"
+            @mousemove="updateSelection"
+            @mouseup="endSelection"
+            @mouseleave="endSelection"
+          > -->
           <CoursewarePreview
             v-if="courseware_info.book_name"
             ref="courserware"
@@ -116,6 +123,19 @@
             @editNote="handEditNote"
             @saveCollect="saveCollect"
           />
+          <!-- <div
+              v-if="isSelecting"
+              :style="{
+                position: 'absolute',
+                top: `${menuPosition.startY}px`,
+                left: `${menuPosition.startX}px`,
+                width: `${menuPosition.endX - menuPosition.startX}px`,
+                height: `${menuPosition.endY - menuPosition.startY}px`,
+                border: '2px solid #165DFF',
+              }"
+            ></div>
+          </div> -->
+
           <div class="preview-right"></div>
         </main>
 
@@ -574,7 +594,13 @@ export default {
         x: -1,
         y: -1,
         componentId: 'WHOLE',
+        startX: null,
+        startY: null,
+        endX: null,
+        endY: null,
       },
+      isSelecting: false,
+
       curToolbarIcon: this.isShowAudit ? 'audit' : '',
       sidebarIconList,
       twoSidebarList: [],
@@ -1470,6 +1496,69 @@ export default {
     computedSelectedGroupCoursewareInfo() {
       return this.$refs.courserware.computedSelectedGroupCoursewareInfo();
     },
+    startSelection(event) {
+      if (
+        this.isTrue(this.courseware_info.is_my_audit_task) &&
+        this.isTrue(this.courseware_info.is_can_add_audit_remark)
+      ) {
+        this.isSelecting = true;
+
+        let clientRect = document.getElementById(`selectable-area-preview`).getBoundingClientRect();
+        this.menuPosition.startX = event.clientX - clientRect.left;
+        this.menuPosition.startY = event.clientY - clientRect.top;
+      }
+    },
+    updateSelection(event) {
+      if (!this.isSelecting) return;
+      let clientRect = document.getElementById(`selectable-area-preview`).getBoundingClientRect();
+
+      this.menuPosition.endX = event.clientX - clientRect.left;
+      this.menuPosition.endY = event.clientY - clientRect.top;
+    },
+    endSelection() {
+      console.log('this.startX' + this.menuPosition.startX);
+      console.log('this.endX' + this.menuPosition.endX);
+      console.log('this.startY' + this.menuPosition.startY);
+      console.log('this.endY' + this.menuPosition.endY);
+
+      if (!this.isSelecting || this.menuPosition.startX === this.menuPosition.endX || !this.menuPosition.endX) return;
+      this.isSelecting = false;
+      const width = Math.abs(this.menuPosition.endX - this.menuPosition.startX);
+      const height = Math.abs(this.menuPosition.endY - this.menuPosition.startY);
+      const x =
+        this.menuPosition.endX > this.menuPosition.startX
+          ? `${this.menuPosition.startX}px`
+          : `${this.menuPosition.endX}px`;
+      const y =
+        this.menuPosition.endY > this.menuPosition.startY
+          ? `${this.menuPosition.startY}px`
+          : `${this.menuPosition.endY}px`;
+      let obj = {
+        id: Math.random().toString(36).substring(2, 10),
+        width: `${width}px`,
+        height: `${height}px`,
+        x,
+        y,
+        text: '',
+      };
+      this.menuPosition.startX = null;
+      this.menuPosition.endX = null;
+      this.menuPosition.startY = null;
+      this.menuPosition.endY = null;
+      if (width && height && this.isText) {
+        this.data.text_list.push(obj);
+        this.activeType = 'text';
+        this.activeIndex = this.data.text_list.length - 1;
+
+        this.hotspotsActiveIndex = this.data.text_list.length - 1;
+      } else if (width && height && !this.isText) {
+        this.data.input_list.push(obj);
+        this.activeType = 'input';
+        this.activeIndex = this.data.input_list.length - 1;
+
+        this.inputActiveIndex = this.data.input_list.length - 1;
+      }
+    },
   },
 };
 </script>