Changeset 79a0317 for imaps-frontend/src/scripts/main/MapBuilder.js

Timestamp:

01/21/25 03:08:24 (3 days ago)

Author:

stefan toskovski <stefantoska84@…>

Branches:

main

Parents:

0c6b92a

Message:

F4 Finalna Verzija

File:

• imaps-frontend/src/scripts/main/MapBuilder.js (modified) (19 diffs)

imaps-frontend/src/scripts/main/MapBuilder.js

@@ -21 +21 @@
 
         // TODO AKO DRAGNIT NEKOJ OD POCETOK NA STAGE POZICIIVE KE SA ZEZNAT
-        // TODO jwt vo cookie
         // TODO placed shape i mouseMoveHandler da ne callback ( da ne vrakjat funkcija)
         // TODO text na top layer sekogas
@@ -35 +34 @@
         this.textLayer = new Konva.Layer();
         this.gridLayer.listening(false);
+
+        this.isDrawEventBound = false;
 
 
@@ -96 +97 @@
     setupEventListeners() {
         document.getElementById("shapeOptions").addEventListener("click", this.selectShape.bind(this));
-        window.addEventListener("keydown", this.handleExitSelection.bind(this));
-        window.addEventListener("keydown", this.handleDelete.bind(this));
-        window.addEventListener("keydown", this.rotateShapesBy90Deg.bind(this));
-        window.addEventListener("keydown", this.toggleEfficientDrawingMode.bind(this));
+        // window.addEventListener("keydown", this.handleExitSelection.bind(this));
+        // window.addEventListener("keydown", this.handleDelete.bind(this));
+        // window.addEventListener("keydown", this.rotateShapesBy90Deg.bind(this));
+        // window.addEventListener("keydown", this.toggleEfficientDrawingMode.bind(this));
         window.addEventListener("resize", this.handleResize.bind(this));
 
@@ -107 +108 @@
         this.boundEfficientDrawingModeEventListener = this.toggleEfficientDrawingMode.bind(this);
 
-        //this.attachKeyPressEventListeners();
+        this.attachKeyPressEventListeners();
 
         this.stage.on("mousedown touchstart", this.handleMouseDown.bind(this));
@@ -119 +120 @@
 
     detachKeyPressEventListeners() {
+        console.log("DETACH")
         window.removeEventListener("keydown", this.boundEscapeEventListener);
         window.removeEventListener("keydown", this.boundDeleteEventListener);
@@ -126 +128 @@
 
     attachKeyPressEventListeners() {
+        console.log("ATTACH")
         window.addEventListener("keydown", this.boundEscapeEventListener);
         window.addEventListener("keydown", this.boundDeleteEventListener);
@@ -269 +272 @@
         let infoPin = Factory.createShape("InfoPin", attrs);
         addEventHandling(infoPin, this, "dblclick");
-        //this.shapes.push(infoPin);
         ShapeRegistry.add(infoPin)
         this.mainLayer.add(infoPin);
@@ -307 +309 @@
 
         const placedObj = Factory.createShape(this.hoverObj.type, attrs);
+
         if (!placedObj) return;
 
@@ -312 +315 @@
 
         this.mainLayer.add(placedObj);
-        //this.shapes.push(placedObj);
-        console.log("VO PLACED SHAEPS WALL ZITI SE: " + placedObj.className);
         ShapeRegistry.add(placedObj);
         addEventHandling(placedObj, this, "dblclick");
         this.mainLayer.draw();
-
         // site ovie func da se vo edna funkcija vo shape.
 
         placedObj.displayName(this.textLayer);
         placedObj.snapToGrid();
+        placedObj.onPlace();
 
         triggerMapSave();
@@ -328 +329 @@
             this.stopDrawing();
         }
+        this.mainTransformer.nodes([])
     }
 
     stopDrawing() {
-        this.mainTransformer.nodes([]);
-        if (this.hoverObj != null) this.hoverObj.remove();
-        this.dragLayer.removeChildren();
-        this.stage.off("mousemove", this.boundMouseMoveHandler);
-        this.stage.off("click", this.boundPlaceShapeHandler);
+        if(this.isDrawEventBound){
+            this.mainTransformer.nodes([]);
+            if (this.hoverObj != null) this.hoverObj.remove();
+            this.dragLayer.removeChildren();
+            this.stage.off("mousemove", this.boundMouseMoveHandler);
+            this.stage.off("click", this.boundPlaceShapeHandler);
+            this.isDrawEventBound = false;
+        }
+
     }
 
@@ -365 +371 @@
         this.dragLayer.add(this.hoverObj);
         this.dragLayer.moveToTop();
+
+
         this.boundMouseMoveHandler = this.mouseMoveHandler.bind(this);
         this.boundPlaceShapeHandler = this.placeShape.bind(this);
+        this.isDrawEventBound = true;
 
         this.stage.on("mousemove", this.boundMouseMoveHandler);
@@ -374 +383 @@
     selectShape(e) {
         if (e.target.tagName === "LI") {
+          this.stopDrawing()
             const shapeType = e.target.getAttribute("data-info");
             this.startDrawing(shapeType);
-            this.mainTransformer.nodes([]);
+            this.mainTransformer.nodes([])
         }
     }
@@ -464 +474 @@
 
     saveShapeDetails() {
-        // this.shapes.forEach(shape => {
-        //     shape.saveShapeDetails();
-        //     console.log(shape.info);
-        // });
         ShapeRegistry.saveDetails();
         console.log("thisflornum",this.floorNum)
@@ -478 +484 @@
     }
 
-    getPayload(){
-        this.saveShapeDetails();
-        return {
-            shapes: ShapeRegistry.getShapes(this.floorNum),
-            roomTypes: JSON.stringify(this.roomTypes),
-            mapName: this.mapName,
-            floorNum: this.floorNum
-        }
-    }
 
 
     handleStageClick(e) {
         if (this.selectionRectangle.visible()) {
+            console.log("STAGECLICK1")
             return;
         }
 
         if (e.target === this.stage) {
+            console.log("STAGECLICK2")
             this.mainTransformer.nodes([]);
             return;
@@ -500 +499 @@
 
         if (!e.target.hasName("mapObj")) {
+            console.log("STAGECLICK3")
             return;
         }
@@ -505 +505 @@
         const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
         const isSelected = this.mainTransformer.nodes().indexOf(e.target) >= 0;
+
 
         if (!metaPressed && !isSelected) {
@@ -527 +528 @@
     }
 
-    getRoomTypes() {
-        return this.roomTypes;
-    }
-
-    getRooms() {
-        return this.getShapeInfoByType("Room");
-    }
-
-    getPins() {
-        return this.getShapeInfoByType("InfoPin");
-    }
-
-    getEntrances() {
-        return this.getShapeInfoByType("Entrance");
-    }
-
-
-
-    getShapeInfoByType(type) {
-        return ShapeRegistry.getShapes(this.floorNum).filter((shape) => shape.className === type).map((shape) => shape.info);
-    }
-
 
     drawConnection(node1Name, node2Name) {
 
         ShapeRegistry.drawConnection(node1Name,node2Name);
-    }
-
-    getNodeByName(name) {
-        return ShapeRegistry.getShapes(this.floorNum).filter(shape => shape instanceof MapNode && shape.info.name === name)[0];
     }
 
@@ -571 +546 @@
     }
 
-    isMainEntranceSelected() {
-        console.log(this.getEntrances().forEach((en) => console.log(en.isMainEntrance, "asdsad")));
-
-        let hasMainEntrance = false;
-
-        this.getEntrances().forEach((entrance) => {
-            if (entrance.isMainEntrance === true) hasMainEntrance = true;
-        });
-
-        return hasMainEntrance;
-
-    }
 
     clearMap() {
@@ -653 +616 @@
         this.mainLayer.add(this.selectionRectangle);
 
-        ShapeRegistry.getShapes(this.floorNum).forEach((shape) => shape.displayName(this.textLayer));
+        ShapeRegistry.getShapes(this.floorNum).forEach((shape) => {
+            shape.displayName(this.textLayer);
+            if(shape.className === "Entrance"){
+                shape.setHighlight();
+            }
+        });
     }