ur-ui-kit-tm
Version:
unlimited robotics ui kit
51 lines (50 loc) • 2.7 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useRef, useState } from "react";
import { MapContainer, MapImage, RoomsContainer } from "./map.styled";
import Room from "./parts/room/Room";
export var HouseMap = function (_a) {
var rooms = _a.rooms, hideMap = _a.hideMap, areaSelected = _a.areaSelected, onAreaSelected = _a.onAreaSelected, onNavigate = _a.onNavigate, mapUrl = _a.mapUrl;
var _b = useState(0), imgOrigW = _b[0], setImgOrigW = _b[1];
var _c = useState(0), imgW = _c[0], setImgW = _c[1];
var _d = useState(0), imgH = _d[0], setImgH = _d[1];
var contReff = useRef();
useEffect(function () {
var _a = contReff.current, offsetWidth = _a.offsetWidth, offsetHeight = _a.offsetHeight;
if (!(offsetWidth && offsetHeight)) {
return;
}
var img = new Image();
img.onload = function () {
var width = img.width, height = img.height;
setImgOrigW(width);
var imgMax = width / height >= offsetWidth / offsetHeight;
if (imgMax) {
setImgW(offsetWidth);
setImgH((offsetWidth * height) / width);
}
else {
setImgW((offsetHeight * width) / height);
setImgH(offsetHeight);
}
};
img.src = mapUrl;
}, [mapUrl, contReff]);
var scale = useMemo(function () { return imgW / imgOrigW; }, [imgOrigW, imgW]);
return (_jsxs(MapContainer, __assign({ ref: contReff }, { children: [_jsx(MapImage, { src: mapUrl, transparent: hideMap }, void 0), _jsx(RoomsContainer, __assign({ imgW: imgW, imgH: imgH }, { children: rooms === null || rooms === void 0 ? void 0 : rooms.map(function (room, i) { return (_jsx(Room, { room: room, hideMap: hideMap, coordinates: {
x1: room.coordinates.x1 * scale,
x2: room.coordinates.x2 * scale,
y1: room.coordinates.y1 * scale,
y2: room.coordinates.y2 * scale,
}, selected: areaSelected, onAreaSelected: function () { return onAreaSelected(room.id); }, onNavigate: function () { return onNavigate(room.id); } }, i)); }) }), void 0)] }), void 0));
};