I am in the midst of a fairly complex project, creating a floorplan and adding desks to that floorplan. I have the floorplan image with height and width in px of the image, and also the physical size of the floor in mm. I also have the same data for each desk being placed, along with top and left locations in px.
How am I able to use getBoundingClientRect and this information to determine correct scaling of desks to may image size?
This is the code I currently have but I am unsure how to relate width/height (in px) to wMM/hMM.
const getScale = () => {
const site = maps.maps[currentMap]; // the id on the select
if (!site) return;
let map = mapRef.current;
let rect = map?.getBoundingClientRect();
let mapWidth = rect.width; // Width of the floorplan image in px
let mapHeight = rect.height; // Height of the floorplan image in px
// Scale calculations based on physical dimensions (in mm)
let scaleW = (mapWidth && site.wMM) ? (mapWidth / site.wMM) : 1; // Width scale factor
let scaleH = (mapHeight && site.hMM) ? (mapHeight / site.hMM) : 1; // Height scale factor
// Store scale values
mapScale = { height: scaleH, width: scaleW, top: rect.top, left: rect.left };
return mapScale;
};
// desk component, showing only relevant size and location calculations
const top = parseInt((desk.y * scale.height) + scale.top); // Top position of the desk
const left = parseInt((desk.x * scale.width) + scale.left); // Left position of the desk
let deskWidth = 0;
let deskHeight = 0;
try {
if (dImg) {
deskImg = dImg.deskImage;
// Calculate desk size in pixels based on its physical dimensions
deskWidth = (dImg.wMM * scale.width); // Desk width in pixels
deskHeight = (dImg.hMM * scale.height); // Desk height in pixels
}
To be absolutely clear, the site variable in getScale() has 4 fields: height, width, hMM and wMM. The dImg variable has these same 4 fields. The first 2 are measurements in PX and the second 2 are the physical measurements in millimetres.
How can these calculations be modified appropriately to correctly set the scale for my (current) window size and resolution?