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];
}
}