feat(draw): update

src/core/Scene.js

@@ -87,6 +87,17 @@ export default class Scene extends Mitt {
       this.scene.remove(obj);
     }
   }
+  clearDrawScene() {
+    for (var i = this.scene.children.length - 1; i >= 0; i--) {
+      let obj = this.scene.children[i];
+      if (
+        String(obj.name).includes("marker_") ||
+        String(obj.name).includes("line_point_")
+      ) {
+        this.scene.remove(obj);
+      }
+    }
+  }
   loadLight = () => {
     const light = new THREE.AmbientLight(0xffffff, 1.5); // 柔和的白光
     this.scene.add(light);

src/core/box/VerticalBox.js

@@ -58,6 +58,7 @@ export default class VerticalBox extends THREE.Group {
 
         texture.colorSpace = THREE.SRGBColorSpace;
         img = new ImgLabel(texture, matLine, false);
+        img.userData = i.id;
         img.position.y += 1;
         img.position.z -= 0.2;
         this.add(img);

src/core/box/object/Line.js

@@ -123,10 +123,11 @@ export default class Line extends Line2 {
     }
 
     const geometry = new LineGeometry();
-  
+
     cross.visible = false;
     geometry.setPositions(points);
     super(geometry, matLine);
+    this.name = "line_" + this.uuid;
     this.userData = {
       dir: endEdge.name,
       points: points,

src/core/box/object/LinePoints.js

@@ -58,7 +58,7 @@ export default class LinePoints extends Line2 {
     // console.log("points", points);
     geometry.setPositions(points);
     super(geometry, matLine);
-    this.name = "line_" + this.uuid;
+    this.name = "line_point_" + this.uuid;
     this.scale.set(1, 1, 1);
     this.position.y += 0.5;
     this.add(cross);

src/core/player/Player.js

@@ -185,11 +185,10 @@ export default class Player {
         this.raycaster.setFromCamera(this.pointerdown, this.orthCamera);
         let intersectArr = this.scene.boxManager.imgList;
         const intersects = this.raycaster.intersectObjects(intersectArr, false);
-        console.log("intersects", intersects);
+
         if (intersects[0]) {
           // this.drawing = false;
           const imageId = intersects[0].object.userData;
-
           let lasPos = new THREE.Vector3(
             this.pointerdown.x,
             this.pointerdown.y,
@@ -235,10 +234,12 @@ export default class Player {
         this.renderLines.push(points);
         this.scene.scene.add(finishLine);
         const imageId = this.touchImg.object.userData;
+
         const activeLineItem = {
           id: imageId,
           dir: [dir],
         };
+
         console.log("this.touchImg", activeLineItem, points);
         this.insertActiveEdge(activeLineItem);
         this.drawLine = null;
@@ -371,15 +372,26 @@ export default class Player {
   showAllActiveEdges() {
     if (this.inited) {
       let imgList = this.scene.boxManager.imgList;
-      this.activeEdges.forEach((edge) => {
-        const exist = imgList.find((item) => item.userData === edge.id);
-        // console.log("exist", exist);
-        if (exist) {
-          edge.dir.forEach((dir) => {
-            exist.touchLines.children[dir].visible = true;
+      if (this.activeEdges.length > 0) {
+        this.activeEdges.forEach((edge) => {
+          const exist = imgList.find((item) => item.userData === edge.id);
+          // console.log("exist", exist);
+          if (exist) {
+            edge.dir.forEach((dir) => {
+              exist.touchLines.children[dir].visible = true;
+            });
+          }
+        });
+      } else {
+        imgList.forEach((img) => {
+          // console.log("img", img);
+          img.touchLines.children.forEach((line) => {
+            if (line.visible) {
+              line.visible = false;
+            }
           });
-        }
-      });
+        });
+      }
     }
   }
   getDrawData() {
@@ -471,6 +483,14 @@ export default class Player {
     this.drawing = false;
   }
 
+  clear() {
+    this.activeEdges = [];
+    this.renderLines = [];
+    this.renderMarkers = [];
+    this.scene.clearDrawScene();
+    this.reset();
+  }
+
   update = () => {
     if (this.floorplanControls.enabled) {
       this.floorplanControls && this.floorplanControls.update();

src/view/case/photos/index.vue

@@ -25,8 +25,8 @@
         <el-button @click="handleMark">标注方向</el-button>
         <el-button @click="handleLine">标注连线</el-button>
         <el-button @click="handleSave" type="success">保存</el-button>
-        <!-- 
-        <el-button @click="handleClear" v-if="hasDrawData" type="warning"
+
+        <!-- <el-button @click="handleClear" v-if="hasDrawData" type="warning"
           >清空</el-button
         > -->
 
@@ -136,7 +136,6 @@ const changeList = async (list) => {
 };
 const renderCanvas = () => {
   const canvas = document.getElementById("canvas");
-  // console.log(canvas)
 
   scene = new Scene(canvas);
   scene.init();
@@ -195,6 +194,7 @@ const handleSave = async () => {
     const res = await saveCaseImgTagData({
       caseId: caseId.value,
       data: data,
+      isHorizontal: !sortType.value,
     });
     ElMessage.success("保存成功！");
     console.log("res", res);
@@ -207,7 +207,7 @@ const handleFree = () => {
 };
 const handleClear = () => {
   if (window.scene) {
-    window.scene.player.reset();
+    window.scene.player.clear();
   }
 };