feat(map): update

src/core/box/object/PureTextLabel.js

@@ -10,12 +10,12 @@ export default class PureTextLabel extends THREE.Mesh {
     canvas.height = height;
 
     let fontFamily = "Arial";
-    let fontSize = fontsize * res;
+    let fs = fontsize * res;
     var context = canvas.getContext("2d");
     context.fillStyle = "transparent";
     context.rect(0, 0, width, height);
     context.fill();
-    let fontStyle = "normal " + fontSize + "px " + fontFamily;
+    let fontStyle = "normal " + fs + "px " + fontFamily;
     // console.log("fontStyle", fontStyle);
     context.font = fontStyle;
     context.fillStyle = color;
@@ -41,7 +41,13 @@ export default class PureTextLabel extends THREE.Mesh {
       this.uuid = id;
     }
     const p = new THREE.Vector3().copy(point);
-    this.userData = p.toArray();
+    this.userData = {
+      id: this.uuid,
+      text: text,
+      color: color,
+      pos: p.toArray(),
+      fontsize: fontsize,
+    };
     this.position.copy(p);
     this.name = "pureText_" + text;
   }

src/core/box/object/marker.js

@@ -17,7 +17,7 @@ export default class Marker extends THREE.Mesh {
     this.rotation.y = 0;
     this.position.y = 5;
     this.position.z -= 0.02;
-    this.userData = startPoint;
+    this.userData = a.toArray();
     this.visible = true;
     this.scale.set(1, 1, 1);
     this.position.y += 0.5;

src/core/player/Player.js

@@ -115,12 +115,6 @@ export default class Player {
     return maxIndexObject.index;
   }
 
-  // removeMarker() {
-  //   if (this.marker) {
-  //     this.scene.scene.remove(this.marker);
-  //     this.marker = null;
-  //   }
-  // }
   setFreeMode() {
     this.floorplanControls.enablePan = true;
     this.floorplanControls.mouseButtons = {
@@ -242,7 +236,7 @@ export default class Player {
         pos.unproject(this.orthCamera);
         pos.y = 5;
         this.text.position.copy(pos);
-        this.text.userData = pos.toArray();
+        this.text.userData.pos = pos.toArray();
       }
     }
   };
@@ -371,7 +365,7 @@ export default class Player {
           type: 4,
           text: this.showText,
           id: this.text.uuid,
-          pos: this.text.userData,
+          ...this.text.userData,
         });
         this.drawing = true;
         // const activeSymbolItem = {
@@ -412,7 +406,17 @@ export default class Player {
       // this.drawing = false;
     }
     if (this.mode === 4) {
-      this.drawing = false;
+      if (this.text) {
+        let pos = new THREE.Vector3(this.pointerup.x, this.pointerup.y, -1);
+        pos.unproject(this.orthCamera);
+        pos.y = 5;
+        this.text.position.copy(pos);
+        this.text.userData.pos = pos.toArray();
+        const activeTextItem = this.text.userData;
+        this.drawing = false;
+        console.log("activeTextItem", activeTextItem);
+        this.insertrenderTexts(activeTextItem);
+      }
     }
     this.syncDrawData();
   };
@@ -535,6 +539,16 @@ export default class Player {
       this.activeEdges.push(item);
     }
   }
+
+  insertrenderTexts(item) {
+    const index = this.renderTexts.findIndex((s) => item.id === s.id);
+    if (index > -1) {
+      this.renderTexts[index] = item;
+    } else {
+      this.renderTexts.push(item);
+    }
+  }
+
   showAllActiveEdges() {
     if (this.inited) {
       let imgList = this.scene.boxManager.imgList;
@@ -562,6 +576,12 @@ export default class Player {
   }
   deleteItemByType(type, pos) {
     if (type === 1) {
+      const index = this.renderMarkers.findIndex((mk) => {
+        const p = new THREE.Vector3().fromArray(mk.point);
+        const v = new THREE.Vector3().fromArray(pos);
+        return p.equals(v);
+      });
+      this.renderMarkers.splice(index, 1);
     }
     if (type === 2) {
     }
@@ -578,21 +598,26 @@ export default class Player {
   }
   editing(item) {
     if (item.type === 4) {
-      console.log("editing", item);
-      const lastPos = this.text.userData;
-      const newP = new THREE.Vector3().fromArray(lastPos);
-      this.scene.scene.remove(this.text);
-      this.text = null;
-      this.showText = item.text;
-      // console.log("this.text", lastPos, newP, item);
-      this.text = new PureTextLabel(
-        item.text,
-        newP,
-        item.fontsize,
-        item.color,
-        item.id
-      );
-      this.scene.scene.add(this.text);
+      if (this.text) {
+        const { pos } = this.text.userData;
+        const newP = new THREE.Vector3().fromArray(pos);
+        this.scene.scene.remove(this.text);
+        this.text = null;
+        this.showText = item.text;
+        console.log("editing", item, newP);
+        // // console.log("this.text", lastPos, newP, item);
+        this.text = new PureTextLabel(
+          item.text,
+          newP,
+          item.fontsize,
+          item.color,
+          item.id
+        );
+        this.scene.scene.add(this.text);
+        const activeTextItem = this.text.userData;
+        console.log("activeTextItem", activeTextItem);
+        this.insertrenderTexts(activeTextItem);
+      }
     }
   }
   getDrawData() {
@@ -603,19 +628,25 @@ export default class Player {
         hor_activeEdges: this.activeEdges,
         hor_markers: this.renderMarkers,
         hor_symbols: this.renderSymbols,
+        hor_texts: this.renderTexts,
         vir_lines: [],
         vir_activeEdges: [],
         vir_markers: [],
+        vir_symbols: [],
+        vir_texts: [],
       };
     } else {
       data = {
         hor_lines: [],
         hor_activeEdges: [],
         hor_markers: [],
+        hor_symbols: [],
+        hor_texts: [],
         vir_lines: this.renderLines,
         vir_activeEdges: this.activeEdges,
         vir_markers: this.renderMarkers,
         vir_symbols: this.renderSymbols,
+        vir_texts: this.renderTexts,
       };
     }
 
@@ -630,7 +661,13 @@ export default class Player {
   load(type, data) {
     if (type === 1) {
       console.log("data1", data);
-      const { hor_activeEdges, hor_lines, hor_markers, hor_symbols } = data;
+      const {
+        hor_activeEdges,
+        hor_lines,
+        hor_markers,
+        hor_symbols,
+        hor_texts,
+      } = data;
       hor_activeEdges && (this.activeEdges = hor_activeEdges);
       if (hor_lines && Array.isArray(hor_lines)) {
         this.renderLines = hor_lines;
@@ -658,10 +695,31 @@ export default class Player {
           this.scene.scene.add(symbol);
         });
       }
+      if (hor_texts && Array.isArray(hor_texts)) {
+        this.renderTexts = hor_texts;
+        hor_texts.forEach((txt) => {
+          console.log("pos");
+          const p = new THREE.Vector3().fromArray(txt.pos);
+          const text = new PureTextLabel(
+            txt.text,
+            p,
+            txt.fontsize,
+            txt.color,
+            txt.id
+          );
+          this.scene.scene.add(text);
+        });
+      }
     }
 
     if (type === 2) {
-      const { vir_activeEdges, vir_lines, vir_markers, vir_symbols } = data;
+      const {
+        vir_activeEdges,
+        vir_lines,
+        vir_markers,
+        vir_symbols,
+        vir_texts,
+      } = data;
       vir_activeEdges && (this.activeEdges = vir_activeEdges);
       if (vir_lines && Array.isArray(vir_lines)) {
         this.renderLines = vir_lines;
@@ -681,12 +739,27 @@ export default class Player {
       if (vir_symbols && Array.isArray(vir_symbols)) {
         this.renderSymbols = vir_symbols;
         vir_symbols.forEach((syb) => {
-          console.log("pos", syb);
+          // console.log("pos", syb);
           const p = new THREE.Vector3().fromArray(syb.point);
           const symbol = new CircleTextLabel(syb.index, p);
           this.scene.scene.add(symbol);
         });
       }
+      if (vir_texts && Array.isArray(vir_texts)) {
+        this.renderTexts = vir_texts;
+        vir_texts.forEach((txt) => {
+          console.log("pos");
+          const p = new THREE.Vector3().fromArray(txt.pos);
+          const text = new PureTextLabel(
+            txt.text,
+            p,
+            txt.fontsize,
+            txt.color,
+            txt.id
+          );
+          this.scene.scene.add(text);
+        });
+      }
     }
     this.syncDrawData();
   }