@parkassist/pa-ui-library/dist/components/MySiteMap/index.js

INX Platform elements

var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
  function adopt(value) {
    return value instanceof P ? value : new P(function (resolve) {
      resolve(value);
    });
  }
  return new (P || (P = Promise))(function (resolve, reject) {
    function fulfilled(value) {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    }
    function rejected(value) {
      try {
        step(generator["throw"](value));
      } catch (e) {
        reject(e);
      }
    }
    function step(result) {
      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
    }
    step((generator = generator.apply(thisArg, _arguments || [])).next());
  });
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from 'react';
import { Row } from '../Layout/Flex';
import LeafletMap from './LeafletMap';
import Sign from './Models/Sign';
import Bay from './Models/Bay';
import EditableBay from './Models/EditableBay';
function getImageSize(url) {
  return __awaiter(this, void 0, void 0, function* () {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.src = url;
      img.onload = () => resolve({
        width: img.width,
        height: img.height
      });
      img.onerror = error => reject(error);
    });
  });
}
function MySiteMap({
  url,
  bays,
  signs = [],
  selectedBay = null,
  selectedBays = [],
  selectedSign = null,
  isSelectingArea = false,
  editable = false,
  showOverstay = false,
  height = '100%',
  width = '100%',
  notificationBay,
  renderBayTooltip = () => null,
  renderSignTooltip = () => null,
  onSelectBay = () => {},
  onSelectBays = () => {},
  onSelectSign = () => {},
  onEditedBay = () => {},
  onEditedSign = () => {},
  onHoverBay = () => {},
  onBayMouseLeave = () => null,
  strokeOnSelected,
  onSetInitialZoom = () => null,
  updateRef = () => null,
  dragging = false,
  hideZoom = false
}) {
  const [imageSize, setImageSize] = useState(null);
  const [currentZoom, setCurrentZoom] = useState(null);
  const [initialZoom, setInitialZoom] = useState(null);
  const isBaySelected = bay => selectedBay === bay.id || (selectedBays === null || selectedBays === void 0 ? void 0 : selectedBays.map(b => b.id).includes(bay.id));
  const isBayOverstay = bay => bay.id === (notificationBay === null || notificationBay === void 0 ? void 0 : notificationBay.id);
  const grabBaysByBounds = (bay, bounds) => {
    const matchX = bounds.start.x < bay.mapPosition.x && bay.mapPosition.x < bounds.end.x || bounds.start.x > bay.mapPosition.x && bay.mapPosition.x > bounds.end.x;
    const matchY = bounds.start.y < bay.mapPosition.y && bay.mapPosition.y < bounds.end.y || bounds.start.y > bay.mapPosition.y && bay.mapPosition.y > bounds.end.y;
    return matchX && matchY;
  };
  const handleSelectSeveralBays = bounds => {
    const newSelectedBays = bays.filter(b => grabBaysByBounds(b, bounds));
    onSelectBays(newSelectedBays);
  };
  const init = () => __awaiter(this, void 0, void 0, function* () {
    const size = yield getImageSize(url);
    setImageSize(size);
  });
  useEffect(() => {
    init();
  }, []);
  const handleZoom = newZoom => {
    setCurrentZoom(newZoom);
  };
  const mapRefCallback = useCallback(node => {
    if (node) {
      updateRef(node);
      setCurrentZoom(node.getZoom());
    }
  }, []);
  useEffect(() => {
    if (currentZoom && !initialZoom) {
      setInitialZoom(currentZoom);
      onSetInitialZoom(currentZoom);
    }
  }, [currentZoom]);
  return imageSize && _jsx(Row, {
    style: {
      height: height,
      width: width,
      overflow: 'hidden'
    },
    children: _jsxs(LeafletMap, {
      ref: mapRefCallback,
      url: url,
      height: imageSize.height,
      width: imageSize.width,
      isSelectingArea: isSelectingArea,
      onSelectArea: handleSelectSeveralBays,
      onZoomChange: handleZoom,
      bays: bays,
      dragging: dragging,
      hideZoom: hideZoom,
      children: [signs.map(sign => _jsx(Sign, {
        sign: sign,
        showPin: Boolean(selectedSign),
        selected: sign.id === selectedSign,
        editable: editable && sign.id === selectedSign,
        onClick: onSelectSign,
        zoom: currentZoom || 0,
        onEdited: onEditedSign,
        renderTooltip: renderSignTooltip
      }, sign.id)), bays.map(bay => editable && !isSelectingArea && selectedBay === bay.id ? _jsx(EditableBay, {
        bay: bay,
        showPin: Boolean(selectedBay),
        onClick: onSelectBay,
        selected: true,
        zoom: currentZoom || 0,
        onEdited: onEditedBay
      }, `ed-${bay.id}`) : _jsx(Bay, {
        bay: bay,
        forcedColor: bay.forcedColor,
        hoverable: true,
        strokeOnSelected: strokeOnSelected,
        showPin: Boolean(selectedBay),
        onClick: onSelectBay,
        selected: Boolean(isBaySelected(bay)),
        overstay: showOverstay && notificationBay && isBayOverstay(bay) ? notificationBay : null,
        onHover: onHoverBay,
        onMouseLeave: onBayMouseLeave,
        zoom: currentZoom || 0,
        renderTooltip: renderBayTooltip
      }, bay.id))]
    })
  });
}
export default MySiteMap;