1

I'm using interact js and calculations to try to save a representation of a room on a blueprint and return it to the same relative place on the grid when the blueprint is reloaded. On floor reload, however, the interact js object moves at a seemingly random interval. This continues to proceed in the same direction and distance on every floor reload. I have no idea why this keeps happening.

floorClick1(floor) {
            this.savePositions();
            this.rooms = [];
            this.displayedRooms = [];
            floor.rooms.forEach((room)=>{
                if(room.xCoordinate<0||room.yCoordinate<0){
                    this.rooms.push(room);
                }
                else{
                    this.displayedRooms.push(room);
                    this.setPosition(room);
                }
            });
        },
        styleString(room){
            let style = `top: ${room.y}px; left: ${room.x}px; height: ${room.length}px; width: ${room.width}px;`;
            console.log(style);
            return style;
        },
        spawnRoom(room) {
            this.displayedRooms.push(room);
            this.rooms = this.rooms.filter(item => {
                return room.roomId != item.roomId;
            })
        },
        unspawnRoom(room) {
            room.xCoordinate = -1;
            room.yCoordinate = -1;
            room.width = 200;
            room.length = 150;

            this.rooms.push(room);
            this.displayedRooms = this.displayedRooms.filter(item => {
                return room.roomId != item.roomId;
            })
        },

        // grabs position and size of blueprint zone, gets position of each element inside blueprint zone,
        // and logs their positions as a percentage of distance across the zone
        savePosition(roomElementId) {

            const blueprintZone = document.getElementById('grid-target');

            // declares dimension lets for blueprintZone
            let zoneStartPointX = 0;
            let zoneStartPointY = 0;
            let zoneWidth = 0;
            let zoneHeight = 0;

            // grabs dimensions using helper methods
            const startPoints = getPositionXY(blueprintZone);
            zoneStartPointX = startPoints[0];
            zoneStartPointY = startPoints[1];
            const zoneSize = getSizeXY(blueprintZone);
            zoneWidth = zoneSize[0];
            zoneHeight = zoneSize[1];

            // grabs room in the blueprint area
            const roomInZone = document.getElementById(roomElementId);
            console.log(roomInZone);

            // add position for all rooms in the drop zone
            // run roomRelativeXY on each room in list
            // save xy percentage to db
            return roomRelativeXY(roomInZone).concat(getSizeXY(roomInZone));

            // gets the position of an element in the frame
            function getPositionXY(element) {
                let rect = element.getBoundingClientRect();
                let relativePosX = rect.x;
                let relativePosY = rect.y;
                console.log("relativePosX: " + relativePosX + ", relativePosY: " + relativePosY);
                return [relativePosX, relativePosY];
            }

            // gets size of element in frame
            function getSizeXY(element) {
                const rect = element.getBoundingClientRect();
                const elemWidth = rect.width;
                const elemHeight = rect.height;
                console.log("elemWidth: " + elemWidth + ", elemHeight: " +elemHeight);
                return [elemWidth, elemHeight];
            }

            // define function to grab relative position of room and save it to db
            function roomRelativeXY(element) {
                let roomStartPointX = 0;
                let roomStartPointY = 0;

                // get element xy position
                const roomStarts = getPositionXY(element);
                roomStartPointX = roomStarts[0];
                roomStartPointY = roomStarts[1];
                console.log("roomStartPointX: " + roomStartPointX + ", roomStartPointY: " + roomStartPointY);


                // get relative position of room in blueprint zone
                const roomRelativeX = roomStartPointX - zoneStartPointX;
                const roomRelativeY = roomStartPointY - zoneStartPointY;
                console.log("roomRelativeX: " + roomRelativeX + ", roomRelativeY: " + roomRelativeY);

                // get percentage of xy distance across zone
                const roomStartPercentX = roomRelativeX / zoneWidth;
                const roomStartPercentY = roomRelativeY / zoneHeight;
                return [roomStartPercentX, roomStartPercentY];
            }

        },
        savePositions(){
        this.displayedRooms.forEach(room => {
            let roomElementId = room.roomName.substring(0,1)+room.roomId;
            let position = this.savePosition(roomElementId);
            room.xCoordinate = position[0];
            room.yCoordinate = position[1];
            room.width = position[2];
            room.length = position[3];
        });
        },
        setPosition(room) {

            //get width and height and coordinates of dropzone
            //get percentages from room
            //multiply x percentage from room by width of dropzone
            //same for y and height
            //add those numbers to coordinates of dropzone
            //set room elements coordinates, height, and width
            
            const blueprintZone = document.getElementById('grid-target');

            // declares dimension lets for blueprintZone
            let zoneWidth = 0;
            let zoneHeight = 0;

            // grabs dimensions using helper methods
            const startPoints = getPositionXY(blueprintZone);
            let zoneStartPointX = startPoints[0];
            let zoneStartPointY = startPoints[1];
            const zoneSize = getSizeXY(blueprintZone);
            zoneWidth = zoneSize[0];
            zoneHeight = zoneSize[1];

            const roomxPositionInZone = room.xCoordinate * zoneWidth;
            const roomyPositionInZone = room.yCoordinate * zoneHeight;

            const roomxPosition = roomxPositionInZone + zoneStartPointX;
            const roomyPosition = roomyPositionInZone + zoneStartPointY;

            // grabs room in the blueprint area
            room.x = roomxPosition;
            room.y = roomyPosition;

            // gets the position of an element in the frame
            function getPositionXY(element) {
                let rect = element.getBoundingClientRect();
                let relativePosX = rect.x;
                let relativePosY = rect.y;
                console.log("relativePosX: " + relativePosX + ", relativePosY: " + relativePosY);
                return [relativePosX, relativePosY];
            }

            // gets size of element in frame
            function getSizeXY(element) {
                const rect = element.getBoundingClientRect();
                const elemWidth = rect.width;
                const elemHeight = rect.height;
                console.log("elemWidth: " + elemWidth + ", elemHeight: " +elemHeight);
                return [elemWidth, elemHeight];
            }
        }

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.