feat: draw delete

src/core/box/VerticalBox.js

@@ -1,6 +1,7 @@
 import * as THREE from "three";
 import TextLabel from "./object/TextLabel";
 import ImgLabel from "./object/ImgLabel";
+import ImgLabelBox from "./object/ImgLabelBox";
 import SimpleLabel from "./object/SimpleLabel";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
 
@@ -52,36 +53,36 @@ export default class VerticalBox extends THREE.Group {
         let imgRatio = texture.image.width / texture.image.height;
         let planeRatio = 1.5 / 2;
         texture.matrixAutoUpdate = false;
-        if (planeRatio < imgRatio) {
-              //  debugger
-          // texture.matrix.setUvTransform(
-          //   0,
-          //   0,
-          //   planeRatio / imgRatio,
-          //   1,
-          //   0,
-          //   0.5,
-          //   0.5
-          // );
-        } else {
-     
+        if (planeRatio > imgRatio) {
           texture.matrix.setUvTransform(
             0,
             0,
+            planeRatio / imgRatio,
             1,
-            imgRatio / planeRatio,
             0,
             0.5,
             0.5
           );
+        } else {
+          // debugger
+          // texture.matrix.setUvTransform(
+          //   0,
+          //   0,
+          //   1,
+          //   imgRatio / planeRatio,
+          //   0,
+          //   0.5,
+          //   0.5
+          // );
         }
-        // let ratio = planeRatio / imgRatio;
-
-        // texture.repeat.x = ratio;
-        // texture.offset.x = 0.5 * (1 - ratio);
 
         texture.colorSpace = THREE.SRGBColorSpace;
-        img = new ImgLabel(texture, matLine, false);
+     
+        // texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+        // texture.repeat.set(2, 2); // 纹理平铺两次
+        // texture.offset.set(0.5, 0.5); // 纹理偏移到中心
+        img = new ImgLabelBox(texture, matLine, false);
+
         img.userData = i.id;
         img.position.y += 1;
         img.position.z -= 0.2;

src/core/box/object/ImgLabel.js

@@ -28,19 +28,12 @@ export default class ImgLabel extends THREE.Mesh {
 
     const m = new THREE.MeshBasicMaterial({
       map: texture,
-      // needUpdate: true,
-      // side: THREE.DoubleSide,
-      // alphaTest: 0.5,
       transparent: true,
-      // onBeforeCompile: (shader) => {
-      //   shader.fragmentShader = shader.fragmentShader.replace(
-      //     "#include <alphatest_fragment>",
-      //     "if ( diffuseColor.a > alphaTest ) diffuseColor = vec4(vec3(0,1,0.33), 1.0);"
-      //   );
-      // },
     });
     super(g, m);
 
+  
+
     this.width = width;
     this.height = height;
     this.touchLines = new TouchEdge(p, matLine);

src/core/box/object/ImgLabelBox.js

@@ -0,0 +1,65 @@
+import * as THREE from "three";
+import TouchEdge from "./TouchEdge";
+
+export default class ImgLabel extends THREE.Mesh {
+  constructor(texture, matLine, isHorizontal = true) {
+    let width, height, p;
+    if (isHorizontal) {
+      width = 1.5;
+      height = 0.85;
+      p = [
+        [-0.75, 0, -0.425, 0.75, 0, -0.425],
+        [-0.75, 0, -0.425, -0.75, 0, 0.425],
+        [-0.75, 0, 0.425, 0.75, 0, 0.425],
+        [0.75, 0, 0.425, 0.75, 0, -0.425],
+      ];
+    } else {
+      width = 1.5;
+      height = 2;
+      p = [
+        [-0.75, 0, -1, 0.75, 0, -1],
+        [-0.75, 0, -1, -0.75, 0, 1],
+        [-0.75, 0, 1, 0.75, 0, 1],
+        [0.75, 0, 1, 0.75, 0, -1],
+      ];
+    }
+    const g = new THREE.PlaneGeometry(width, height);
+    g.rotateX(-Math.PI / 2);
+
+    // const m = new THREE.MeshBasicMaterial({
+    //   map: texture,
+    //   transparent: true,
+    // });
+
+    const bg = new THREE.MeshBasicMaterial({
+      color: 0xf2f2f2,
+      transparent: false,
+    });
+
+    super(g, bg);
+
+    let imgRatio = texture.image.width / texture.image.height;
+
+    const imageG = new THREE.PlaneGeometry(width, width / imgRatio);
+
+    imageG.rotateX(-Math.PI / 2);
+
+    const im = new THREE.MeshBasicMaterial({
+      map: texture,
+      transparent: false,
+    });
+    const imageMesh = new THREE.Mesh(imageG, im);
+
+    imageMesh.renderOrder = 10;
+    this.add(imageMesh);
+
+    this.width = width;
+    this.height = height;
+    this.touchLines = new TouchEdge(p, matLine);
+
+    this.touchLines.position.y += 0.5;
+    this.add(this.touchLines);
+    // this.touchLines.children.forEach((child) => (child.visible = true));
+    this.name = "imglabel";
+  }
+}

src/core/box/object/SimpleLabel.js

@@ -26,6 +26,7 @@ export default class SimpleLabel extends THREE.Mesh {
     canvas_map.needsUpdate = true;
     canvas_map.anisotropy = 4;
 
+
     const g = new THREE.PlaneGeometry(1.5, 0.15);
     g.rotateX(-Math.PI / 2);
 

src/core/player/Player.js

@@ -383,30 +383,33 @@ export default class Player {
     if (this.mode === 1) {
       this.drawing = false;
       this.floorplanControls.enabled = true;
-      this.startObj = null;
+
       if (this.drawLine) {
         const points = this.drawLine.userData.points;
         const dir = this.drawLine.userData.dir;
         const imageId = this.touchImg.object.userData;
         const finishLine = new LinePoints(points, this.matLine, dir, imageId);
-
+        // console.log("startObj", this.startObj);
         this.scene.scene.add(finishLine);
         const activeLineItem = {
           id: finishLine.uuid,
           imgId: imageId,
+          startId: this.startObj.userData,
           dir: dir,
           points: points,
         };
         const activeEdgeItem = {
           id: imageId,
+          startId: this.startObj.userData,
           dir: [dir],
         };
 
         this.renderLines.push(activeLineItem);
-        console.log("this.touchImg", activeLineItem, points);
+        // console.log("this.touchImg", activeLineItem, points);
         this.insertActiveEdge(activeEdgeItem);
         this.scene.scene.remove(this.drawLine);
         this.drawLine = null;
+        this.startObj = null;
       }
     }
     if (this.mode === 2) {
@@ -846,21 +849,48 @@ export default class Player {
   //单多张图片删除时要删除相关数据
   deleteImageDataByIds(ids) {
     ids.forEach((id) => {
-      const edgeIndex = this.activeEdges.findIndex((item) => item.id === id);
       const makerIndex = this.renderMarkers.findIndex((item) => item.id === id);
-      const lineIndex = this.renderLines.findIndex((item) => item.imgId === id);
-      if (edgeIndex > -1) {
-        this.activeEdges.splice(edgeIndex, 1);
-      }
       if (makerIndex > -1) {
-        this.renderMarkers.splice(edgeIndex, 1);
-      }
-      if (lineIndex > -1) {
-        this.renderLines.splice(lineIndex, 1);
+        this.renderMarkers.splice(makerIndex, 1);
       }
-    });
 
-    console.log("deleteImageByIds", ids);
+      const lines = this.renderLines.filter(
+        (item) => item.imgId === id || item.startId === id
+      );
+
+      lines.forEach((line) => {
+        const edge = this.activeEdges.find(
+          (item) => item.id === line.imgId || item.startId === line.imgId
+        );
+        if (edge) {
+          if (edge.dir.length > 0) {
+            const dirIndex = Array.from(edge.dir).findIndex(
+              (d) => d === line.dir
+            );
+            edge.dir.splice(dirIndex, 1);
+          } else {
+            const indexEdge = this.activeEdges.findIndex(
+              (a) => a.id === edge.id
+            );
+            console.warn("edge没dir", indexEdge);
+            indexEdge > -1 && this.activeEdges.splice(indexEdge, 1);
+          }
+        }
+
+        const lineIndex = this.renderLines.findIndex(
+          (item) => item.imageId === line.imageId
+        );
+        console.log("lineIndex", lineIndex);
+        if (lineIndex > -1) {
+          this.renderLines.splice(lineIndex, 1);
+        }
+      });
+      console.log("lines", lines);
+    });
+    this.syncDrawData();
+    setTimeout(() => {
+      this.scene.emit("autoSave");
+    }, 2500);
   }
   update = () => {
     if (this.floorplanControls.enabled) {

src/view/case/photos/index.vue

@@ -206,6 +206,10 @@ const renderCanvas = () => {
     editing.value.data = editData;
     // debugger;
   });
+  scene.on("autoSave", () => {
+    console.log("autoSave");
+    handleAutoSave();
+  });
 };
 const onSwiper = (swiper) => {
   console.log("onSwiper");
@@ -250,6 +254,7 @@ const handleSwitchGrid = async () => {
   );
   if (res) {
     sortType.value = !sortType.value;
+    window.scene.setMode(0);
     window.scene.clearScene();
     handleClear();
   }
@@ -290,6 +295,18 @@ const handleSave = async () => {
     console.log("res", res);
   }
 };
+
+const handleAutoSave = async () => {
+  if (window.scene) {
+    const data = scene.player.getDrawData();
+    scene.player.syncDrawData();
+    await saveCaseImgTagData({
+      caseId: caseId.value,
+      data: data,
+      isHorizontal: !sortType.value,
+    });
+  }
+};
 const handleFree = () => {
   if (window.scene) {
     window.scene.setMode(0);
@@ -320,10 +337,10 @@ const handleEditingClose = () => {
 };
 
 const handleImageDel = (ids) => {
-  t
-  // if (window.scene) {
-  //   window.scene.deleteImageDataByIds(ids);
-  // }
+  console.log("handleImageDel", ids);
+  if (window.scene) {
+    window.scene.deleteImageDataByIds(ids);
+  }
 };
 
 onMounted(() => {