Ignore:
Timestamp:
01/21/25 03:08:24 (3 days ago)
Author:
stefan toskovski <stefantoska84@…>
Branches:
main
Parents:
0c6b92a
Message:

F4 Finalna Verzija

Location:
imaps-frontend/src/scripts/main
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r0c6b92a r79a0317  
    2121
    2222        // TODO AKO DRAGNIT NEKOJ OD POCETOK NA STAGE POZICIIVE KE SA ZEZNAT
    23         // TODO jwt vo cookie
    2423        // TODO placed shape i mouseMoveHandler da ne callback ( da ne vrakjat funkcija)
    2524        // TODO text na top layer sekogas
    … …  
    3534        this.textLayer = new Konva.Layer();
    3635        this.gridLayer.listening(false);
     36
     37        this.isDrawEventBound = false;
    3738
    3839
    … …  
    9697    setupEventListeners() {
    9798        document.getElementById("shapeOptions").addEventListener("click", this.selectShape.bind(this));
    98         window.addEventListener("keydown", this.handleExitSelection.bind(this));
    99         window.addEventListener("keydown", this.handleDelete.bind(this));
    100         window.addEventListener("keydown", this.rotateShapesBy90Deg.bind(this));
    101         window.addEventListener("keydown", this.toggleEfficientDrawingMode.bind(this));
     99        // window.addEventListener("keydown", this.handleExitSelection.bind(this));
     100        // window.addEventListener("keydown", this.handleDelete.bind(this));
     101        // window.addEventListener("keydown", this.rotateShapesBy90Deg.bind(this));
     102        // window.addEventListener("keydown", this.toggleEfficientDrawingMode.bind(this));
    102103        window.addEventListener("resize", this.handleResize.bind(this));
    103104
    … …  
    107108        this.boundEfficientDrawingModeEventListener = this.toggleEfficientDrawingMode.bind(this);
    108109
    109         //this.attachKeyPressEventListeners();
     110        this.attachKeyPressEventListeners();
    110111
    111112        this.stage.on("mousedown touchstart", this.handleMouseDown.bind(this));
    … …  
    119120
    120121    detachKeyPressEventListeners() {
     122        console.log("DETACH")
    121123        window.removeEventListener("keydown", this.boundEscapeEventListener);
    122124        window.removeEventListener("keydown", this.boundDeleteEventListener);
    … …  
    126128
    127129    attachKeyPressEventListeners() {
     130        console.log("ATTACH")
    128131        window.addEventListener("keydown", this.boundEscapeEventListener);
    129132        window.addEventListener("keydown", this.boundDeleteEventListener);
    … …  
    269272        let infoPin = Factory.createShape("InfoPin", attrs);
    270273        addEventHandling(infoPin, this, "dblclick");
    271         //this.shapes.push(infoPin);
    272274        ShapeRegistry.add(infoPin)
    273275        this.mainLayer.add(infoPin);
    … …  
    307309
    308310        const placedObj = Factory.createShape(this.hoverObj.type, attrs);
     311
    309312        if (!placedObj) return;
    310313
    … …  
    312315
    313316        this.mainLayer.add(placedObj);
    314         //this.shapes.push(placedObj);
    315         console.log("VO PLACED SHAEPS WALL ZITI SE: " + placedObj.className);
    316317        ShapeRegistry.add(placedObj);
    317318        addEventHandling(placedObj, this, "dblclick");
    318319        this.mainLayer.draw();
    319 
    320320        // site ovie func da se vo edna funkcija vo shape.
    321321
    322322        placedObj.displayName(this.textLayer);
    323323        placedObj.snapToGrid();
     324        placedObj.onPlace();
    324325
    325326        triggerMapSave();
    … …  
    328329            this.stopDrawing();
    329330        }
     331        this.mainTransformer.nodes([])
    330332    }
    331333
    332334    stopDrawing() {
    333         this.mainTransformer.nodes([]);
    334         if (this.hoverObj != null) this.hoverObj.remove();
    335         this.dragLayer.removeChildren();
    336         this.stage.off("mousemove", this.boundMouseMoveHandler);
    337         this.stage.off("click", this.boundPlaceShapeHandler);
     335        if(this.isDrawEventBound){
     336            this.mainTransformer.nodes([]);
     337            if (this.hoverObj != null) this.hoverObj.remove();
     338            this.dragLayer.removeChildren();
     339            this.stage.off("mousemove", this.boundMouseMoveHandler);
     340            this.stage.off("click", this.boundPlaceShapeHandler);
     341            this.isDrawEventBound = false;
     342        }
     343
    338344    }
    339345
    … …  
    365371        this.dragLayer.add(this.hoverObj);
    366372        this.dragLayer.moveToTop();
     373
     374
    367375        this.boundMouseMoveHandler = this.mouseMoveHandler.bind(this);
    368376        this.boundPlaceShapeHandler = this.placeShape.bind(this);
     377        this.isDrawEventBound = true;
    369378
    370379        this.stage.on("mousemove", this.boundMouseMoveHandler);
    … …  
    374383    selectShape(e) {
    375384        if (e.target.tagName === "LI") {
     385          this.stopDrawing()
    376386            const shapeType = e.target.getAttribute("data-info");
    377387            this.startDrawing(shapeType);
    378             this.mainTransformer.nodes([]);
     388            this.mainTransformer.nodes([])
    379389        }
    380390    }
    … …  
    464474
    465475    saveShapeDetails() {
    466         // this.shapes.forEach(shape => {
    467         //     shape.saveShapeDetails();
    468         //     console.log(shape.info);
    469         // });
    470476        ShapeRegistry.saveDetails();
    471477        console.log("thisflornum",this.floorNum)
    … …  
    478484    }
    479485
    480     getPayload(){
    481         this.saveShapeDetails();
    482         return {
    483             shapes: ShapeRegistry.getShapes(this.floorNum),
    484             roomTypes: JSON.stringify(this.roomTypes),
    485             mapName: this.mapName,
    486             floorNum: this.floorNum
    487         }
    488     }
    489486
    490487
    491488    handleStageClick(e) {
    492489        if (this.selectionRectangle.visible()) {
     490            console.log("STAGECLICK1")
    493491            return;
    494492        }
    495493
    496494        if (e.target === this.stage) {
     495            console.log("STAGECLICK2")
    497496            this.mainTransformer.nodes([]);
    498497            return;
    … …  
    500499
    501500        if (!e.target.hasName("mapObj")) {
     501            console.log("STAGECLICK3")
    502502            return;
    503503        }
    … …  
    505505        const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
    506506        const isSelected = this.mainTransformer.nodes().indexOf(e.target) >= 0;
     507
    507508
    508509        if (!metaPressed && !isSelected) {
    … …  
    527528    }
    528529
    529     getRoomTypes() {
    530         return this.roomTypes;
    531     }
    532 
    533     getRooms() {
    534         return this.getShapeInfoByType("Room");
    535     }
    536 
    537     getPins() {
    538         return this.getShapeInfoByType("InfoPin");
    539     }
    540 
    541     getEntrances() {
    542         return this.getShapeInfoByType("Entrance");
    543     }
    544 
    545 
    546 
    547     getShapeInfoByType(type) {
    548         return ShapeRegistry.getShapes(this.floorNum).filter((shape) => shape.className === type).map((shape) => shape.info);
    549     }
    550 
    551530
    552531    drawConnection(node1Name, node2Name) {
    553532
    554533        ShapeRegistry.drawConnection(node1Name,node2Name);
    555     }
    556 
    557     getNodeByName(name) {
    558         return ShapeRegistry.getShapes(this.floorNum).filter(shape => shape instanceof MapNode && shape.info.name === name)[0];
    559534    }
    560535
    … …  
    571546    }
    572547
    573     isMainEntranceSelected() {
    574         console.log(this.getEntrances().forEach((en) => console.log(en.isMainEntrance, "asdsad")));
    575 
    576         let hasMainEntrance = false;
    577 
    578         this.getEntrances().forEach((entrance) => {
    579             if (entrance.isMainEntrance === true) hasMainEntrance = true;
    580         });
    581 
    582         return hasMainEntrance;
    583 
    584     }
    585548
    586549    clearMap() {
    … …  
    653616        this.mainLayer.add(this.selectionRectangle);
    654617
    655         ShapeRegistry.getShapes(this.floorNum).forEach((shape) => shape.displayName(this.textLayer));
     618        ShapeRegistry.getShapes(this.floorNum).forEach((shape) => {
     619            shape.displayName(this.textLayer);
     620            if(shape.className === "Entrance"){
     621                shape.setHighlight();
     622            }
     623        });
    656624    }
    657625

  • imaps-frontend/src/scripts/main/MapDisplay.js

    r0c6b92a r79a0317  
    44import {zoomStage} from "../util/zoomStage.js";
    55import {addEventHandling} from "../util/addEventHandling.js";
     6import ShapeRegistry from "../util/ShapeRegistry.js";
    67import triggerNavigate from "../util/triggerNavigate.js";
    78import config from "../net/netconfig.js";
     9import {dispatchCustomEvent} from "../util/dispatchCustomEvent.js";
     10import { jsPDF } from "jspdf";
     11
    812
    913export class MapDisplay {
    … …  
    1822        });
    1923
     24        this.selectedRoom = {
     25            id: 1,
     26            name: "223",
     27            type: "Laboratory",
     28            image:
     29                "data:image/jpeg;base64,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",
     30            description: "223 is a laboratory with a capacity of 40 people",
     31        };
     32        this.toggleSearch = false;
     33
    2034        this.shapes = [];
    2135        this.roomTypes = [];
    … …  
    2842        this.stage.add(this.textLayer);
    2943
     44
     45        this.cachedCanvases = [];
     46
    3047        this.floorNum = floorNum;
    3148
    … …  
    6481        dsrData.forEach((shape) => {
    6582            if (shape.className !== "InfoPin") {
     83                console.log("SHAPE ATTRS CREATE: " + JSON.stringify(shape.attrs));
    6684                const renderedShape = Factory.createRenderedShape(shape.className, shape.attrs);
    6785                addEventHandling(renderedShape, this, "click");
    6886                this.shapes.push(renderedShape);
     87                console.log(renderedShape)
    6988            }
    7089        });
    … …  
    7897    }
    7998
    80 
    81 
    8299    loadMapN(floorData) {
    83100        if (floorData == null || floorData === "") return;
    … …  
    97114
    98115
     116
    99117    drawRouteNEW(nodes, offset = 0) {
    100118
    … …  
    106124        let buff = [nodes[idx].coordinates.x, nodes[idx].coordinates.y];
    107125
    108 
    109126        ++idx;
    110127
    … …  
    115132
    116133            if (idx >= nodes.length){
     134                console.log("FLOOR NUM DISPLAY: " + this.floorNum)
     135                let stageInfo = {stage:this.stage.clone(),floor:this.floorNum};
     136                this.cachedCanvases.push(stageInfo);
     137                dispatchCustomEvent("navend",this.downloadURI)
    117138                return;
    118139            }
    … …  
    122143
    123144            if (nextNode.floorNumber !== currentNode.floorNumber) {
     145                let stageInfo = {stage:this.stage.clone(),floor:this.floorNum};
     146                this.cachedCanvases.push(stageInfo);
    124147                triggerNavigate(nodes, idx, nextNode.floorNumber, nextNode);
    125148                return;
    … …  
    131154            const endY = nextNode.coordinates.y;
    132155
    133             const numSegments = 12;
     156            const numSegments = 10;
    134157
    135158            const deltaX = (endX - startX) / numSegments;
    … …  
    157180                    clearInterval(interval);
    158181                    idx++;
    159                     setTimeout(drawNextSegment, 150);
     182                    setTimeout(drawNextSegment, 60);
    160183                }
    161             }, 50);
     184            }, 30);
    162185        };
    163186
    164187        drawNextSegment();
    165188    }
    166 
    167 
    168189
    169190    initializeRoomTypes() {
    … …  
    173194    }
    174195
    175     getRoomTypes() {
    176         return this.roomTypes;
    177     }
    178 
    179 
    180     getShapeByName(name){
    181         return this.shapes.find(shape => shape.info.name === name)
    182     }
    183 
    184196    getShapeByType(type) {
    185197        return this.shapes.filter((shape) => shape.class === type)
    186     }
    187 
    188     toggleSearchRoom() {
    189         this.toggleSearch = !this.toggleSearch;
    190198    }
    191199
    … …  
    196204    }
    197205
    198     getMainEntrance() {
    199         return this.shapes.filter(shape => shape.class === "Entrance").filter(el => el.info.isMainEntrance === true)[0];
    200     }
    201 
    202     setFilter(filter) {
     206     downloadURI(uri, name) {
     207        let link = document.createElement('a');
     208        link.download = name;
     209        link.href = uri;
     210        document.body.appendChild(link);
     211        link.click();
     212        document.body.removeChild(link);
     213    }
     214
     215
     216    getRouteImages(mapDetails = { mapName: "mapName", from: "from", to: "to" }) {
     217
     218        const pdf = new jsPDF("p", "mm", "a4");
     219        const pageWidth = pdf.internal.pageSize.getWidth();
     220        const pageHeight = pdf.internal.pageSize.getHeight();
     221        const margin = 10;
     222        let yOffset = margin;
     223
     224        const imagesData = [];
     225
     226        let minWidth = 800;
     227
     228        this.cachedCanvases.forEach((canvas, index) => {
     229            console.log("CANVASL " + JSON.stringify(canvas.stage))
     230            let dsrStage = Konva.Node.create(canvas.stage, document.createElement("div"));
     231
     232            let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
     233
     234            dsrStage.getLayers().forEach(layer => {
     235                layer.getChildren().forEach(shape => {
     236                    const shapeX = shape.x();
     237                    const shapeY = shape.y();
     238                    const width = shape.width() * shape.scaleX();
     239                    const height = shape.height() * shape.scaleY();
     240
     241                    minX = Math.min(minX, shapeX - shape.offsetX() * shape.scaleX());
     242                    minY = Math.min(minY, shapeY - shape.offsetY() * shape.scaleY());
     243                    maxX = Math.max(maxX, shapeX + width - shape.offsetX() * shape.scaleX());
     244                    maxY = Math.max(maxY, shapeY + height - shape.offsetY() * shape.scaleY());
     245                });
     246            });
     247
     248            let padding = 50;
     249
     250            const virtualWidth = maxX - minX + padding;
     251            const virtualHeight = maxY - minY + padding;
     252
     253            const scaleDownFactor = Math.min(pageWidth / virtualWidth, pageHeight / virtualHeight);
     254
     255            dsrStage.size({ width: virtualWidth, height: virtualHeight });
     256            dsrStage.position({ x: -minX, y: -minY });
     257            dsrStage.batchDraw();
     258
     259            let canvasImageURI = dsrStage.toDataURL({
     260                pixelRatio: 1
     261            });
     262
     263            imagesData.push(canvasImageURI);
     264            console.log(`Generated Image ${index + 1}`);
     265        });
     266
     267
     268
     269        imagesData.forEach((imageURI, index) => {
     270            const text = `Floor: ${this.cachedCanvases[index].floor}`;
     271            pdf.text(text, margin, yOffset + 5);
     272
     273            const img = new Image();
     274            img.src = imageURI;
     275
     276            const maxWidth = pageWidth - 2 * margin;
     277            const maxHeight = pageHeight - 2 * margin;
     278            let imgWidth = maxWidth;
     279            let imgHeight = maxHeight / 2
     280
     281            if (imgHeight > maxHeight) {
     282                imgHeight = maxHeight;
     283                imgWidth = (pageWidth * maxHeight) / pageHeight;
     284            }
     285
     286            if (yOffset + imgHeight > pageHeight - margin) {
     287                pdf.addPage();
     288                yOffset = margin;
     289            }
     290
     291            pdf.addImage(imageURI, "PNG", margin, yOffset, imgWidth, imgHeight);
     292            yOffset += imgHeight + 10;
     293        });
     294
     295        pdf.save(`${mapDetails.mapName}-${mapDetails.from}-->${mapDetails.to}.route.pdf`);
     296    }
     297
     298
     299
     300setFilter(filter) {
    203301        let rooms = this.getShapeByType("Room")
    204302        if (filter === "All") {
Note: See TracChangeset for help on using the changeset viewer.