@evergis/react 3.1.1 → 3.1.3

package/dist/react.esm.js

@@ -1,10 +1,501 @@
-import { useState, useCallback } from 'react';
+import React, { Component, useContext, useMemo, createContext, useRef, useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import styled, { css } from 'styled-components';
+import MapGL, { Layer as Layer$1, Source } from 'react-map-gl/mapbox';
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+import { changeProps } from 'find-and';
+import { isEmpty, isNil } from 'lodash-es';
 import { isValid, toDate, format, parseJSON, parseISO } from 'date-fns';
+import { stringify } from 'wkt';
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import { polygon, multiLineString, multiPoint, point, toWgs84, lineString, toMercator, bbox } from '@turf/turf';
+import { GeometryType } from '@evergis/api';
+import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
+import 'mapbox-gl/dist/mapbox-gl.css';
 
-const useToggle = initial => {
-  const [state, setState] = useState(initial !== undefined ? initial : false);
-  const toggle = useCallback(() => setState(!state), [state]);
-  return [state, toggle, setState];
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _taggedTemplateLiteralLoose(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  strings.raw = raw;
+  return strings;
+}
+
+var _templateObject;
+const ErrorBoundaryContainer = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n"])));
+
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+
+  derived = _getPrototypeOf(derived);
+  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
+}
+let ErrorBoundary = /*#__PURE__*/function (_Component) {
+  function ErrorBoundary() {
+    var _this2;
+
+    _classCallCheck(this, ErrorBoundary);
+
+    _this2 = _callSuper(this, ErrorBoundary, arguments);
+    _this2.state = {
+      hasError: false
+    };
+    return _this2;
+  }
+
+  _inherits(ErrorBoundary, _Component);
+
+  return _createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      const {
+        children,
+        errorContents
+      } = this.props;
+      const {
+        hasError
+      } = this.state;
+      return !hasError ? React.createElement(React.Fragment, null, children) : React.createElement(ErrorBoundaryContainer, null, errorContents);
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError() {
+      return {
+        hasError: true
+      };
+    }
+  }]);
+}(Component);
+
+var _templateObject$1;
+const MapWrapper = /*#__PURE__*/styled.div(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  z-index: ", ";\n\n  .mapbox-gl-draw_trash {\n    display: none;\n  }\n\n  .mapboxgl-ctrl-logo {\n    display: none;\n  }\n\n  .mapboxgl-ctrl.mapboxgl-ctrl-attrib {\n    display: none;\n  }\n\n  .mapboxgl-ctrl-geocoder.mapboxgl-ctrl {\n    width: 350px;\n  }\n"])), (_ref) => {
+  let {
+    $zIndex
+  } = _ref;
+  return $zIndex != null ? $zIndex : 1;
+});
+
+const useMapContext = () => {
+  return useContext(MapContext);
+};
+
+const useCurrentSelectedFeature = () => {
+  const {
+    selectFeatures
+  } = useMapContext();
+  return useMemo(() => {
+    var _selectFeatures$featu;
+
+    return (_selectFeatures$featu = selectFeatures.features) == null || (_selectFeatures$featu = _selectFeatures$featu[selectFeatures.layerName]) == null ? void 0 : _selectFeatures$featu.find(item => item.id === selectFeatures.currentId);
+  }, [selectFeatures]);
+};
+
+const MapContext = /*#__PURE__*/createContext({});
+
+var BaseMapTheme;
+
+(function (BaseMapTheme) {
+  BaseMapTheme["Light"] = "light";
+  BaseMapTheme["Dark"] = "dark";
+})(BaseMapTheme || (BaseMapTheme = {}));
+
+var GeometrySelectionTypes;
+
+(function (GeometrySelectionTypes) {
+  GeometrySelectionTypes["Point"] = "select_point";
+  GeometrySelectionTypes["Line"] = "select_line";
+  GeometrySelectionTypes["Circle"] = "select_circle";
+  GeometrySelectionTypes["Rect"] = "select_rect";
+  GeometrySelectionTypes["Polygon"] = "select_polygon";
+  GeometrySelectionTypes["Zones"] = "zones_selection";
+  GeometrySelectionTypes["Coordinates"] = "xy";
+  GeometrySelectionTypes["Route"] = "selection_route";
+})(GeometrySelectionTypes || (GeometrySelectionTypes = {}));
+
+var GeometrySelectionToolTypes;
+
+(function (GeometrySelectionToolTypes) {
+  GeometrySelectionToolTypes["Replace"] = "Replace";
+  GeometrySelectionToolTypes["Unite"] = "Unite";
+  GeometrySelectionToolTypes["Crop"] = "Crop";
+  GeometrySelectionToolTypes["Edit"] = "Edit";
+})(GeometrySelectionToolTypes || (GeometrySelectionToolTypes = {}));
+
+var GeometrySelectionZoneTypes;
+
+(function (GeometrySelectionZoneTypes) {
+  GeometrySelectionZoneTypes["Walking"] = "Walking";
+  GeometrySelectionZoneTypes["Car"] = "Car";
+})(GeometrySelectionZoneTypes || (GeometrySelectionZoneTypes = {}));
+
+var GeometrySelectionRouteTypes;
+
+(function (GeometrySelectionRouteTypes) {
+  GeometrySelectionRouteTypes["Walking"] = "Walking";
+  GeometrySelectionRouteTypes["Car"] = "Car";
+})(GeometrySelectionRouteTypes || (GeometrySelectionRouteTypes = {}));
+
+var GeometryEditorMode;
+
+(function (GeometryEditorMode) {
+  GeometryEditorMode[GeometryEditorMode["Create"] = 0] = "Create";
+  GeometryEditorMode[GeometryEditorMode["Edit"] = 1] = "Edit";
+  GeometryEditorMode[GeometryEditorMode["Transform"] = 2] = "Transform";
+  GeometryEditorMode[GeometryEditorMode["Expand"] = 3] = "Expand";
+  GeometryEditorMode[GeometryEditorMode["Unite"] = 4] = "Unite";
+  GeometryEditorMode[GeometryEditorMode["Subtract"] = 5] = "Subtract";
+})(GeometryEditorMode || (GeometryEditorMode = {}));
+
+const initialGeometrySelection = {
+  active: true,
+  loading: false,
+  type: GeometrySelectionTypes.Point,
+  currentTool: GeometrySelectionToolTypes.Replace,
+  history: {
+    features: [],
+    zones: [],
+    step: -1
+  },
+  editHistory: {
+    features: [],
+    step: -1
+  },
+  isBuffer: false,
+  settings: {
+    zoneDuration: 60,
+    zoneType: GeometrySelectionZoneTypes.Walking,
+    routeType: GeometrySelectionRouteTypes.Walking,
+    bufferRadius: "",
+    bufferMultiplier: "1",
+    bufferInclude: true,
+    selectOutside: false
+  }
+};
+const initialGeometryEditor = {
+  active: false
+};
+const initialSelectFeatures = {
+  initialized: false,
+  layerName: undefined,
+  currentId: null,
+  selectionOffset: 0,
+  features: {},
+  totalCounts: {},
+  statisticsActive: false,
+  geometryMasking: false
+};
+const MapProvider = (_ref) => {
+  let {
+    basemapItems,
+    defaultBasemap,
+    children
+  } = _ref;
+  const map = useRef();
+  const draw = useRef();
+  const [loaded, setLoaded] = useState(false);
+  const [basemapName, setBasemapName] = useState(defaultBasemap);
+  const [globeProjection, setGlobeProjection] = useState(false);
+  const [geometrySelection, setGeometrySelection] = useState(initialGeometrySelection);
+  const [geometryEditor, setGeometryEditor] = useState(initialGeometryEditor);
+  const [selectFeatures, setSelectFeatures] = useState(initialSelectFeatures);
+  const resetGeometrySelection = useCallback(() => {
+    setGeometrySelection(initialGeometrySelection);
+  }, []);
+  const resetGeometryEditor = useCallback(() => {
+    setGeometryEditor(initialGeometryEditor);
+  }, []);
+  const setNextFeature = useCallback(() => {
+    setSelectFeatures(state => {
+      var _features$layerName, _features$layerName2, _features$layerName3;
+
+      const {
+        layerName,
+        features,
+        currentId
+      } = state;
+      const currentIndex = features == null || (_features$layerName = features[layerName]) == null ? void 0 : _features$layerName.findIndex(item => item.id === currentId);
+
+      if (currentIndex === (features == null || (_features$layerName2 = features[layerName]) == null ? void 0 : _features$layerName2.length) - 1) {
+        return state;
+      }
+
+      const nextId = features == null || (_features$layerName3 = features[layerName]) == null || (_features$layerName3 = _features$layerName3[currentIndex + 1]) == null ? void 0 : _features$layerName3.id;
+      return _extends({}, state, {
+        currentId: nextId
+      });
+    });
+  }, []);
+  const setPrevFeature = useCallback(() => {
+    setSelectFeatures(state => {
+      var _features$layerName4, _features$layerName5;
+
+      const {
+        layerName,
+        features,
+        currentId
+      } = state;
+      const currentIndex = features == null || (_features$layerName4 = features[layerName]) == null ? void 0 : _features$layerName4.findIndex(item => item.id === currentId);
+
+      if (currentIndex === 0) {
+        return state;
+      }
+
+      const prevId = features == null || (_features$layerName5 = features[layerName]) == null || (_features$layerName5 = _features$layerName5[currentIndex - 1]) == null ? void 0 : _features$layerName5.id;
+      return _extends({}, state, {
+        currentId: prevId
+      });
+    });
+  }, []);
+  const setSelectedFeatures = useCallback((payload, currentId, offset) => {
+    setSelectFeatures(state => {
+      var _features$firstNotNul;
+
+      const features = payload != null ? payload : {};
+      const firstNotNullLayerName = Object.keys(features).find(key => features[key].length > 0);
+      const featureIdsToSelect = (_features$firstNotNul = features[firstNotNullLayerName]) == null ? void 0 : _features$firstNotNul.map((_ref2) => {
+        let {
+          id
+        } = _ref2;
+        return id;
+      });
+      return _extends({}, state, {
+        features,
+        layerName: firstNotNullLayerName,
+        currentId: currentId != null ? currentId : featureIdsToSelect == null ? void 0 : featureIdsToSelect[0],
+        selectionOffset: offset
+      });
+    });
+  }, []);
+  const setSelectedFeaturesTotalCounts = useCallback(payload => {
+    setSelectFeatures(state => _extends({}, state, {
+      totalCounts: payload
+    }));
+  }, []);
+  const setSelectFeaturesInitialized = useCallback(payload => {
+    setSelectFeatures(state => _extends({}, state, {
+      initialized: payload
+    }));
+  }, []);
+  const setSelectFeaturesLayerName = useCallback(payload => {
+    setSelectFeatures(state => {
+      var _state$features;
+
+      return _extends({}, state, {
+        layerName: payload,
+        currentId: (_state$features = state.features) == null || (_state$features = _state$features[payload]) == null || (_state$features = _state$features[0]) == null ? void 0 : _state$features.id,
+        selectionOffset: 0
+      });
+    });
+  }, []);
+  const setSelectFeaturesStatisticsActive = useCallback(payload => {
+    setSelectFeatures(state => _extends({}, state, {
+      statisticsActive: payload
+    }));
+  }, []);
+  const setSelectFeaturesGeometryMasking = useCallback(payload => {
+    setSelectFeatures(state => _extends({}, state, {
+      geometryMasking: payload
+    }));
+  }, []);
+  const updateCurrentFeature = useCallback(payload => {
+    setSelectFeatures(state => {
+      var _state$features$state, _state$features2;
+
+      return _extends({}, state, {
+        features: _extends({}, state.features, {
+          [state.layerName]: changeProps((_state$features$state = (_state$features2 = state.features) == null ? void 0 : _state$features2[state.layerName]) != null ? _state$features$state : [], {
+            id: state.currentId
+          }, payload)
+        })
+      });
+    });
+  }, []);
+  const resetSelectedFeatures = useCallback(() => {
+    setSelectFeatures(initialSelectFeatures);
+  }, []);
+  return React.createElement(MapContext.Provider, {
+    value: {
+      map,
+      draw,
+      loaded,
+      setLoaded,
+      basemapItems,
+      basemapName,
+      setBasemapName,
+      defaultBasemap,
+      globeProjection,
+      setGlobeProjection,
+      geometrySelection,
+      setGeometrySelection,
+      resetGeometrySelection,
+      geometryEditor,
+      setGeometryEditor,
+      resetGeometryEditor,
+      selectFeatures,
+      setNextFeature,
+      setPrevFeature,
+      setSelectedFeatures,
+      setSelectedFeaturesTotalCounts,
+      setSelectFeaturesInitialized,
+      setSelectFeaturesLayerName,
+      setSelectFeaturesStatisticsActive,
+      setSelectFeaturesGeometryMasking,
+      updateCurrentFeature,
+      resetSelectedFeatures
+    }
+  }, children);
+};
+
+const useGeometryEditor = () => {
+  const {
+    geometryEditor,
+    setGeometryEditor
+  } = useMapContext();
+  const update = useCallback(newState => {
+    setGeometryEditor(prevState => _extends({}, prevState, newState));
+  }, [setGeometryEditor]);
+  return [geometryEditor, update];
+};
+
+const useEditingFeature = () => {
+  const [{
+    layerName,
+    active,
+    mode
+  }] = useGeometryEditor();
+  const currentSelectedFeature = useCurrentSelectedFeature();
+  return useMemo(() => {
+    return active && (mode === GeometryEditorMode.Edit && layerName === (currentSelectedFeature == null ? void 0 : currentSelectedFeature.layer) || mode === GeometryEditorMode.Create);
+  }, [active, currentSelectedFeature, layerName, mode]);
+};
+
+const useGeometrySelection = () => {
+  const {
+    geometrySelection,
+    setGeometrySelection
+  } = useMapContext();
+  const updateGeometrySelection = useCallback(newState => {
+    setGeometrySelection(prevState => _extends({}, prevState, newState));
+  }, [setGeometrySelection]);
+  return [geometrySelection, updateGeometrySelection];
 };
 
 const NO_CONTENT_VALUE = "—";
@@ -50,11 +541,1138 @@ const formatDate = function formatDate(date, _temp) {
   return defaultValue.toString();
 };
 
+const geometryToWkt = function geometryToWkt(features) {
+  if (features === void 0) {
+    features = [];
+  }
+
+  if (features.length === 0) {
+    return "";
+  }
+
+  return stringify(features[0]);
+};
+
 const isNumeric = number => !isNaN(parseFloat(number)) && isFinite(number);
 
 function isObject(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
-export { DateFormat, NO_CONTENT_VALUE, formatDate, getDate, isNumeric, isObject, useToggle };
+const useEwktGeometry = () => {
+  const [{
+    history,
+    type
+  }] = useGeometrySelection();
+  return useMemo(() => {
+    var _history$zones$histor, _history$zones$histor2;
+
+    if (history.step === -1) {
+      return "";
+    }
+
+    return type === GeometrySelectionTypes.Zones ? !isEmpty((_history$zones$histor = history.zones[history.step]) == null ? void 0 : _history$zones$histor[0]) ? "SRID=3857;" + geometryToWkt((_history$zones$histor2 = history.zones[history.step]) == null ? void 0 : _history$zones$histor2[0]) : "SRID=3857;" + geometryToWkt(history.features[history.step]) : "SRID=3857;" + geometryToWkt(history.features[history.step]);
+  }, [history.features, history.step, history.zones, type]);
+};
+
+const useGeometrySelectionBuffer = () => {
+  const [{
+    settings: {
+      bufferRadius,
+      bufferMultiplier
+    },
+    isBuffer
+  }] = useGeometrySelection();
+  return useMemo(() => {
+    if (!isBuffer || !bufferRadius) {
+      return undefined;
+    }
+
+    return Number((+bufferRadius || 0) * +bufferMultiplier).toFixed(2);
+  }, [isBuffer, bufferRadius, bufferMultiplier]);
+};
+
+const customModes = MapboxDraw.modes;
+const StaticMode = {};
+
+StaticMode.onSetup = function () {
+  this.setActionableState(undefined);
+  return {};
+};
+
+StaticMode.toDisplayFeatures = function (state, geojson, display) {
+  display(geojson);
+};
+
+customModes.static = StaticMode;
+
+const customStyles = [{
+  id: "gl-draw-point",
+  type: "circle",
+  filter: ["all", ["==", "$type", "Point"]],
+  paint: {
+    "circle-radius": 5,
+    "circle-color": "#D20C0C",
+    "circle-stroke-color": "#FFFFFF",
+    "circle-stroke-width": 3,
+    "circle-stroke-opacity": 0.3
+  }
+}, {
+  id: "highlight-inactive-points",
+  type: "circle",
+  filter: ["all", ["==", "$type", "Point"], ["==", "meta", "feature"], ["==", "active", "false"]],
+  paint: {
+    "circle-radius": 5,
+    "circle-color": "#D20C0C",
+    "circle-stroke-color": "#FFFFFF",
+    "circle-stroke-width": 3,
+    "circle-stroke-opacity": 0.3
+  }
+}, {
+  id: "highlight-active-points",
+  type: "circle",
+  filter: ["all", ["==", "$type", "Point"], ["==", "meta", "feature"], ["==", "active", "true"]],
+  paint: {
+    "circle-radius": 3,
+    "circle-color": "#fbb03b",
+    "circle-stroke-color": "#FFFFFF",
+    "circle-stroke-width": 1,
+    "circle-stroke-opacity": 0.3
+  }
+}, {
+  id: "gl-draw-polygon-fill-static",
+  type: "fill",
+  filter: ["all", ["==", "$type", "Polygon"]],
+  paint: {
+    "fill-color": "#D20C0C",
+    "fill-outline-color": "#D20C0C",
+    "fill-opacity": 0.1
+  }
+}, {
+  id: "gl-draw-line",
+  type: "line",
+  filter: ["all", ["==", "$type", "LineString"]],
+  layout: {
+    "line-cap": "round",
+    "line-join": "round"
+  },
+  paint: {
+    "line-color": "#D20C0C",
+    "line-dasharray": [0.2, 2],
+    "line-width": 2
+  }
+}, {
+  id: "gl-draw-polygon-fill",
+  type: "fill",
+  filter: ["all", ["==", "$type", "Polygon"]],
+  paint: {
+    "fill-color": "#D20C0C",
+    "fill-outline-color": "#D20C0C",
+    "fill-opacity": 0.1
+  }
+}, {
+  id: "gl-draw-polygon-midpoint",
+  type: "circle",
+  filter: ["all", ["==", "$type", "Point"], ["==", "meta", "midpoint"]],
+  paint: {
+    "circle-radius": 3,
+    "circle-color": "#fbb03b",
+    "circle-stroke-color": "#FFFFFF",
+    "circle-stroke-width": 1,
+    "circle-stroke-opacity": 0.3
+  }
+}, {
+  id: "gl-draw-polygon-stroke-active",
+  type: "line",
+  filter: ["all", ["==", "$type", "Polygon"]],
+  layout: {
+    "line-cap": "round",
+    "line-join": "round"
+  },
+  paint: {
+    "line-color": "#D20C0C",
+    "line-dasharray": [0.2, 2],
+    "line-width": 2
+  }
+}, {
+  id: "gl-draw-polygon-and-line-vertex-active",
+  type: "circle",
+  filter: ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"]],
+  paint: {
+    "circle-radius": 3,
+    "circle-color": "#D20C0C",
+    "circle-stroke-color": "#FFFFFF",
+    "circle-stroke-width": 3,
+    "circle-stroke-opacity": 0.3
+  }
+}];
+
+const draw = /*#__PURE__*/new MapboxDraw({
+  displayControlsDefault: false,
+  styles: customStyles,
+  modes: customModes,
+  defaultMode: "draw_point",
+  controls: {
+    trash: true
+  }
+});
+const useMapDraw = function useMapDraw(triggerDeps) {
+  if (triggerDeps === void 0) {
+    triggerDeps = [];
+  }
+
+  const {
+    map,
+    draw: drawContext,
+    loaded,
+    basemapName
+  } = useMapContext();
+  useEffect(() => {
+    if (!loaded || !map.current) {
+      return;
+    }
+
+    drawContext.current = draw;
+    map.current.addControl(drawContext.current);
+  }, [loaded]); // eslint-disable-line
+
+  useEffect(() => {
+    if (map.current && map.current.hasControl(drawContext.current)) {
+      map.current.removeControl(drawContext.current);
+      map.current.addControl(drawContext.current);
+    }
+  }, [basemapName, ...triggerDeps]); // eslint-disable-line
+};
+
+const useRedrawLayer = () => {
+  const {
+    map
+  } = useMapContext();
+  return useCallback(layerName => {
+    const layerTileSource = map.current.getSource(layerName);
+    layerTileSource.setTiles(layerTileSource.tiles);
+  }, [map]);
+};
+
+const useSelectedFeatures = () => {
+  var _selectFeatures$featu;
+
+  const {
+    selectFeatures,
+    setSelectedFeatures
+  } = useMapContext();
+  const updatSelectedFeatures = useCallback(features => {
+    setSelectedFeatures(features);
+  }, [setSelectedFeatures]);
+  return [(_selectFeatures$featu = selectFeatures.features) != null ? _selectFeatures$featu : {}, updatSelectedFeatures];
+};
+
+const useSelectFeaturesCount = () => {
+  const {
+    selectFeatures
+  } = useMapContext();
+  return useMemo(() => {
+    var _selectFeatures$featu, _selectFeatures$featu2;
+
+    return (_selectFeatures$featu = (_selectFeatures$featu2 = selectFeatures.features) == null || (_selectFeatures$featu2 = _selectFeatures$featu2[selectFeatures.layerName]) == null ? void 0 : _selectFeatures$featu2.length) != null ? _selectFeatures$featu : 0;
+  }, [selectFeatures]);
+};
+
+const useSelectFeaturesCurrentIndex = () => {
+  const {
+    selectFeatures
+  } = useMapContext();
+  return useMemo(() => {
+    var _selectFeatures$featu, _selectFeatures$featu2;
+
+    return (_selectFeatures$featu = selectFeatures.features) != null && (_selectFeatures$featu = _selectFeatures$featu[selectFeatures.layerName]) != null && _selectFeatures$featu.length ? (_selectFeatures$featu2 = selectFeatures.features) == null || (_selectFeatures$featu2 = _selectFeatures$featu2[selectFeatures.layerName]) == null ? void 0 : _selectFeatures$featu2.findIndex(feature => feature.id === selectFeatures.currentId) : -1;
+  }, [selectFeatures]);
+};
+
+const useSelectFeaturesGeometryMasking = () => {
+  const {
+    selectFeatures,
+    setSelectFeaturesGeometryMasking
+  } = useMapContext();
+  const update = useCallback(state => {
+    setSelectFeaturesGeometryMasking(state);
+  }, [setSelectFeaturesGeometryMasking]);
+  return [selectFeatures.geometryMasking, update];
+};
+
+const useSelectFeaturesInitialized = () => {
+  const {
+    selectFeatures,
+    setSelectFeaturesInitialized
+  } = useMapContext();
+  const update = useCallback(state => {
+    setSelectFeaturesInitialized(state);
+  }, [setSelectFeaturesInitialized]);
+  return [selectFeatures.initialized, update];
+};
+
+const useSelectFeaturesLayerName = () => {
+  const {
+    selectFeatures,
+    setSelectFeaturesLayerName
+  } = useMapContext();
+  const update = useCallback(name => {
+    setSelectFeaturesLayerName(name);
+  }, [setSelectFeaturesLayerName]);
+  return [selectFeatures.layerName, update];
+};
+
+const useSelectFeaturesPagination = () => {
+  const {
+    setNextFeature,
+    setPrevFeature
+  } = useMapContext();
+  const onNext = useCallback(() => {
+    setNextFeature();
+  }, [setNextFeature]);
+  const onPrev = useCallback(() => {
+    setPrevFeature();
+  }, [setPrevFeature]);
+  return {
+    onNext,
+    onPrev
+  };
+};
+
+const useSelectFeaturesStatisticsActive = () => {
+  const {
+    selectFeatures,
+    setSelectFeaturesStatisticsActive
+  } = useMapContext();
+  const update = useCallback(state => {
+    setSelectFeaturesStatisticsActive(state);
+  }, [setSelectFeaturesStatisticsActive]);
+  return [selectFeatures.statisticsActive, update];
+};
+
+const useSelectFeaturesTotalCounts = () => {
+  var _selectFeatures$total;
+
+  const {
+    selectFeatures,
+    setSelectedFeaturesTotalCounts
+  } = useMapContext();
+  const update = useCallback(totalCounts => {
+    setSelectedFeaturesTotalCounts(totalCounts);
+  }, [setSelectedFeaturesTotalCounts]);
+  return [(_selectFeatures$total = selectFeatures.totalCounts) != null ? _selectFeatures$total : {}, update];
+};
+
+const useUpdateCurrentFeature = () => {
+  const {
+    updateCurrentFeature
+  } = useMapContext();
+  return useCallback(values => {
+    updateCurrentFeature(values);
+  }, [updateCurrentFeature]);
+};
+
+const findAttributeInExpression = expression => {
+  if (Array.isArray(expression) && expression.length === 2 && expression[0] === "get") {
+    return [expression[1]];
+  }
+
+  return expression.reduce((acc, curr) => {
+    if (!Array.isArray(curr)) {
+      return acc;
+    }
+
+    if (curr[0] === "get") {
+      return [...new Set([...acc, curr[1]])];
+    }
+
+    return [...new Set([...acc, ...findAttributeInExpression(curr)])];
+  }, []);
+};
+
+const getActualExtrusionHeight = paint => {
+  return Array.isArray(paint == null ? void 0 : paint["fill-extrusion-height"]) && (paint == null ? void 0 : paint["fill-extrusion-height"][0]) === "+" ? paint == null ? void 0 : paint["fill-extrusion-height"][1] : paint == null ? void 0 : paint["fill-extrusion-height"];
+};
+
+const parseClientStyle = style => {
+  var _style$items;
+
+  if (!style) {
+    return [];
+  }
+
+  return style == null || (_style$items = style.items) == null ? void 0 : _style$items.reduce((acc, curr) => {
+    var _Object$entries;
+
+    if (!curr.paint || isEmpty(curr.paint)) {
+      return acc;
+    }
+
+    return (_Object$entries = Object.entries(curr.paint)) == null ? void 0 : _Object$entries.reduce((paintAcc, _ref) => {
+      let [, value] = _ref;
+
+      if (!Array.isArray(value)) {
+        return paintAcc;
+      }
+
+      return [...new Set([...paintAcc, ...findAttributeInExpression(value)])];
+    }, []);
+  }, []);
+};
+
+const convertSpToTurfFeature = geometry => {
+  if (!geometry) {
+    return;
+  }
+
+  switch (geometry.type) {
+    case GeometryType.Point:
+      return point(geometry.coordinates);
+
+    case GeometryType.Multipoint:
+      return multiPoint(geometry.coordinates);
+
+    case GeometryType.Polyline:
+      return multiLineString(geometry.coordinates);
+
+    case GeometryType.Polygon:
+    case GeometryType.Envelope:
+      return polygon(geometry.coordinates);
+  }
+};
+
+const drawModeToGeometrySelectionType = mode => {
+  switch (mode) {
+    case "draw_point":
+      return GeometrySelectionTypes.Point;
+
+    case "draw_polygon":
+      return GeometrySelectionTypes.Polygon;
+
+    case "draw_line_string":
+      return GeometrySelectionTypes.Line;
+
+    default:
+      return GeometrySelectionTypes.Point;
+  }
+};
+
+const getGeometrySelectionTurfFeature = (coordinates, selectionType, toWgs) => {
+  if (toWgs) {
+    switch (selectionType) {
+      case GeometrySelectionTypes.Point:
+        return toWgs84(point(coordinates));
+
+      case GeometrySelectionTypes.Polygon:
+        return toWgs84(polygon(coordinates));
+
+      case GeometrySelectionTypes.Line:
+        return toWgs84(lineString(coordinates));
+    }
+  }
+
+  switch (selectionType) {
+    case GeometrySelectionTypes.Point:
+      return toMercator(point(coordinates));
+
+    case GeometrySelectionTypes.Polygon:
+      return toMercator(polygon(coordinates));
+
+    case GeometrySelectionTypes.Line:
+      return toMercator(lineString(coordinates));
+  }
+};
+
+const useZoomToFeatures = () => {
+  const {
+    map
+  } = useMapContext();
+  return useCallback((features, padding) => {
+    if (!features) {
+      return;
+    }
+
+    const currentFeatureCenter = bbox({
+      type: "FeatureCollection",
+      features: features.map(feature => convertSpToTurfFeature(feature.geometry))
+    });
+    map.current.fitBounds(currentFeatureCenter, {
+      padding: padding != null ? padding : 150
+    });
+  }, [map]);
+};
+
+const DEFAULT_PADDING = 50;
+const useZoomToLayer = () => {
+  const {
+    map
+  } = useMapContext();
+  return useCallback(async (bulkExtent, options) => {
+    var _options$padding;
+
+    if (!bulkExtent || !bulkExtent.overall) {
+      return;
+    }
+
+    map.current.fitBounds([...bulkExtent.overall.coordinates[0], ...bulkExtent.overall.coordinates[1]], {
+      padding: (_options$padding = options == null ? void 0 : options.padding) != null ? _options$padding : DEFAULT_PADDING
+    });
+  }, [map]);
+};
+
+const useZoomToPoint = () => {
+  const {
+    map
+  } = useMapContext();
+  return useCallback((options, callback) => {
+    if (map.current) {
+      if (callback) {
+        map.current.once("moveend", () => {
+          callback();
+        });
+      }
+
+      map.current.flyTo(options);
+    } else {
+      callback == null || callback();
+    }
+  }, [map]);
+};
+
+const useServerNotifications = (url, initialized) => {
+  const hubConnection = useRef(null);
+  const [connection, setConnection] = useState(null);
+  useEffect(() => {
+    if (!initialized) {
+      return;
+    }
+
+    hubConnection.current = new HubConnectionBuilder().withUrl(url, {
+      withCredentials: true
+    }).configureLogging(LogLevel.Information).build();
+    hubConnection.current.start().then(() => console.info("Серверные нотификации подключены")).catch(err => console.info("Ошибка:", err)).finally(() => setConnection(hubConnection.current));
+  }, [initialized]); // eslint-disable-line
+
+  useEffect(() => {
+    if (!connection || connection.state !== "Connected") {
+      return;
+    }
+
+    connection.invoke("SubscribeNotifications", []).then(() => console.info("Подписка `SubscribeNotifications` оформлена")).catch(err => console.info("Ошибка подписки `SubscribeNotifications`:", err));
+  }, [connection]);
+  return connection;
+};
+
+const ServerNotificationsContext = /*#__PURE__*/createContext({});
+
+const useServerNotificationsContext = () => {
+  return useContext(ServerNotificationsContext);
+};
+
+var VerticalPosition;
+
+(function (VerticalPosition) {
+  VerticalPosition["Top"] = "top";
+  VerticalPosition["Bottom"] = "bottom";
+})(VerticalPosition || (VerticalPosition = {}));
+
+var HorizontalPosition;
+
+(function (HorizontalPosition) {
+  HorizontalPosition["Left"] = "left";
+  HorizontalPosition["Right"] = "right";
+})(HorizontalPosition || (HorizontalPosition = {}));
+
+const useResizer = (_ref) => {
+  let {
+    handleVerticalPosition,
+    handleHorizontalPosition,
+    minWidth = Number.MIN_SAFE_INTEGER,
+    maxWidth = Number.MAX_SAFE_INTEGER,
+    horizontal = true,
+    minHeight = Number.MIN_SAFE_INTEGER,
+    maxHeight = Number.MAX_SAFE_INTEGER,
+    vertical = true,
+    useResize = false,
+    onResize,
+    onResizeEnd,
+    onResizeStart
+  } = _ref;
+  const containerRef = useRef();
+  const verticalHandleRef = useRef();
+  const horizontalHandleRef = useRef();
+  const updateSizes = useCallback((width, height) => {
+    var _horizontalHandleRef$, _verticalHandleRef$cu;
+
+    let newWidth = width;
+    let newHeight = height;
+
+    if (horizontal && newWidth < minWidth) {
+      newWidth = minWidth;
+    }
+
+    if (horizontal && newWidth > Math.min(window.innerWidth - ((_horizontalHandleRef$ = horizontalHandleRef.current) == null ? void 0 : _horizontalHandleRef$.clientWidth), maxWidth)) {
+      newWidth = maxWidth;
+    }
+
+    if (vertical && newHeight < minHeight) {
+      newHeight = minHeight;
+    }
+
+    if (vertical && newHeight > Math.min(window.innerHeight - ((_verticalHandleRef$cu = verticalHandleRef.current) == null ? void 0 : _verticalHandleRef$cu.clientHeight), maxHeight)) {
+      newHeight = maxHeight;
+    }
+
+    if (horizontal) {
+      requestAnimationFrame(() => {
+        if (!isNil(containerRef.current)) {
+          containerRef.current.style.width = newWidth + "px";
+        }
+      });
+    }
+
+    if (vertical) {
+      requestAnimationFrame(() => {
+        if (!isNil(containerRef.current)) {
+          containerRef.current.style.height = newHeight + "px";
+        }
+      });
+    }
+
+    onResize == null || onResize(newWidth, newHeight);
+  }, [minWidth, maxWidth, minHeight, maxHeight, horizontal, vertical]);
+  const onPointerMove = useCallback(pointerMoveEvent => {
+    var _containerRef$current, _containerRef$current2, _containerRef$current3;
+
+    const {
+      x,
+      y
+    } = (_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.getBoundingClientRect();
+    const reverseHorizontal = handleHorizontalPosition === HorizontalPosition.Right;
+    const reverseVertical = handleVerticalPosition === VerticalPosition.Bottom;
+    const newWidth = reverseHorizontal ? pointerMoveEvent.pageX - x : ((_containerRef$current2 = containerRef.current) == null ? void 0 : _containerRef$current2.offsetWidth) + x - pointerMoveEvent.pageX;
+    const newHeight = reverseVertical ? pointerMoveEvent.pageY - y : ((_containerRef$current3 = containerRef.current) == null ? void 0 : _containerRef$current3.offsetHeight) + y - pointerMoveEvent.pageY;
+    document.body.style.userSelect = "none";
+    updateSizes(newWidth, newHeight);
+  }, [updateSizes]);
+  const onPointerDown = useCallback(() => {
+    const onPointerUp = () => {
+      document.body.style.userSelect = "initial";
+      document.body.removeEventListener("pointermove", onPointerMove);
+
+      if (!isNil(containerRef.current)) {
+        onResizeEnd == null || onResizeEnd(containerRef.current.offsetWidth, containerRef.current.offsetHeight);
+      }
+    };
+
+    if (!isNil(containerRef.current)) {
+      onResizeStart == null || onResizeStart(containerRef.current.offsetWidth, containerRef.current.offsetHeight);
+    }
+
+    document.body.addEventListener("pointermove", onPointerMove);
+    document.body.addEventListener("pointerup", onPointerUp, {
+      once: true
+    });
+  }, [onPointerMove]); // eslint-disable-line
+
+  useLayoutEffect(() => {
+    if (useResize && !isNil(containerRef.current)) {
+      updateSizes(containerRef.current.offsetWidth, containerRef.current.offsetHeight);
+    }
+  }, [updateSizes, useResize]);
+  return {
+    containerRef,
+    verticalHandleRef,
+    horizontalHandleRef,
+    onPointerDown
+  };
+};
+
+const useToggle = initial => {
+  const [state, setState] = useState(initial !== undefined ? initial : false);
+  const toggle = useCallback(() => setState(!state), [state]);
+  return [state, toggle, setState];
+};
+
+const _excluded = ["zIndex", "lowerSiblings", "upperSiblings", "drawTriggerDeps", "onError", "children"];
+const Map = (_ref) => {
+  let {
+    zIndex,
+    lowerSiblings,
+    upperSiblings,
+    drawTriggerDeps,
+    onError,
+    children
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  const {
+    map,
+    setLoaded
+  } = useMapContext();
+  useMapDraw(drawTriggerDeps);
+  return React.createElement(MapWrapper, {
+    "$zIndex": zIndex
+  }, lowerSiblings, React.createElement(MapGL, Object.assign({}, rest, {
+    renderWorldCopies: true,
+    antialias: true,
+    doubleClickZoom: false,
+    cursor: "default",
+    onLoad: e => {
+      map.current = e.target;
+      map.current.on("error", onError);
+      setLoaded(true);
+    }
+  }), children), upperSiblings);
+};
+
+const BuildingsLayer = (_ref) => {
+  let {
+    beforeId,
+    transparent
+  } = _ref;
+  return React.createElement(Layer$1, {
+    id: "mapbox-3d-buildings",
+    source: "composite",
+    "source-layer": "building",
+    filter: ["==", "extrude", "true"],
+    type: "fill-extrusion",
+    minzoom: 15,
+    beforeId: beforeId,
+    paint: {
+      "fill-extrusion-color": "#aaaaaa",
+      "fill-extrusion-height": ["interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "height"]],
+      "fill-extrusion-base": ["interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "min_height"]],
+      "fill-extrusion-opacity": transparent ? 0 : 0.5
+    }
+  });
+};
+
+const RasterLayer = (_ref) => {
+  let {
+    layer,
+    tileUrl,
+    visible,
+    beforeId
+  } = _ref;
+
+  if (!layer) {
+    return null;
+  }
+
+  return React.createElement(Source, {
+    id: layer.name,
+    type: "raster",
+    tiles: [tileUrl]
+  }, React.createElement(Layer$1, {
+    id: layer.name,
+    type: "raster",
+    "source-layer": "default",
+    beforeId: beforeId,
+    layout: {
+      visibility: visible ? "visible" : "none"
+    }
+  }));
+};
+
+const DEFAULT_COLOR = "#00ffff";
+const DEFAULT_OPACITY = 0.5;
+const DEFAULT_SIZE = 4;
+const DEFAULT_LINE_WIDTH = 1;
+const DEFAULT_CIRCLE_PAINT = {
+  "circle-radius": DEFAULT_SIZE,
+  "circle-color": DEFAULT_COLOR,
+  "circle-opacity": DEFAULT_OPACITY,
+  "circle-stroke-width": 0,
+  "circle-stroke-color": DEFAULT_COLOR,
+  "circle-stroke-opacity": DEFAULT_OPACITY
+};
+const DEFAULT_FILL_PAINT = {
+  "fill-color": DEFAULT_COLOR,
+  "fill-opacity": DEFAULT_OPACITY
+};
+const DEFAULT_FILL_EXTRUSION_PAINT = {
+  "fill-extrusion-base": 0,
+  "fill-extrusion-vertical-gradient": true,
+  "fill-extrusion-color": DEFAULT_COLOR,
+  "fill-extrusion-opacity": DEFAULT_OPACITY,
+  "fill-extrusion-height": 0
+};
+const DEFAULT_LINE_PAINT = {
+  "line-color": DEFAULT_COLOR,
+  "line-width": DEFAULT_LINE_WIDTH,
+  "line-opacity": DEFAULT_OPACITY
+};
+
+const getClientStyleItemPrefixSuffix = (geometryType, type) => {
+  switch (geometryType) {
+    case GeometryType.Point:
+      return ["point-layer-", ""];
+
+    case GeometryType.Polyline:
+      return ["polyline-layer-", ""];
+
+    case GeometryType.Polygon:
+      switch (type) {
+        case "line":
+          return ["polygon-stroke-layer-", "-stroke"];
+
+        case "fill-extrusion":
+          return ["polygon-extrusion-layer-", "-extrusion"];
+
+        default:
+          return ["polygon-layer-", ""];
+      }
+
+    default:
+      return ["", ""];
+  }
+};
+
+const VectorLayer = (_ref) => {
+  var _layer$configuration;
+
+  let {
+    layer,
+    tileUrl,
+    visible,
+    beforeId,
+    getLayerTempStyle,
+    onMount = () => null
+  } = _ref;
+  const clientStyle = layer == null || (_layer$configuration = layer.configuration) == null ? void 0 : _layer$configuration.clientStyle;
+  const {
+    idAttribute,
+    geometryType
+  } = layer.layerDefinition || {};
+  const renderLayerByGeometryType = useCallback(() => {
+    var _getLayerTempStyle, _getLayerTempStyle2, _getLayerTempStyle3, _getLayerTempStyle4, _getLayerTempStyle5, _getLayerTempStyle6, _getLayerTempStyle7, _getLayerTempStyle8, _getLayerTempStyle9, _getLayerTempStyle10, _getLayerTempStyle11, _getLayerTempStyle12, _getLayerTempStyle13, _getLayerTempStyle14;
+
+    const visibility = visible ? "visible" : "none";
+
+    switch (geometryType) {
+      case GeometryType.Point:
+        return React.createElement(Layer$1, {
+          id: layer.name,
+          type: "circle",
+          "source-layer": "default",
+          beforeId: beforeId,
+          layout: _extends({}, getLayerTempStyle == null || (_getLayerTempStyle = getLayerTempStyle(layer.name, "circle")) == null ? void 0 : _getLayerTempStyle.layout, {
+            visibility
+          }),
+          paint: _extends({}, DEFAULT_CIRCLE_PAINT, getLayerTempStyle == null || (_getLayerTempStyle2 = getLayerTempStyle(layer.name, "circle")) == null ? void 0 : _getLayerTempStyle2.paint)
+        });
+
+      case GeometryType.Polygon:
+        return [React.createElement(Layer$1, {
+          key: "polygon-layer-" + layer.name,
+          id: layer.name,
+          type: "fill",
+          "source-layer": "default",
+          beforeId: beforeId,
+          layout: _extends({}, getLayerTempStyle == null || (_getLayerTempStyle3 = getLayerTempStyle(layer.name, "fill")) == null ? void 0 : _getLayerTempStyle3.layout, {
+            visibility: visible && (getLayerTempStyle == null || (_getLayerTempStyle4 = getLayerTempStyle(layer.name, "fill-extrusion")) == null || (_getLayerTempStyle4 = _getLayerTempStyle4.settings) == null || (_getLayerTempStyle4 = _getLayerTempStyle4.fill) == null ? void 0 : _getLayerTempStyle4.showBottomSurface) !== false && Boolean(getActualExtrusionHeight(_extends({}, DEFAULT_FILL_EXTRUSION_PAINT, getLayerTempStyle == null || (_getLayerTempStyle5 = getLayerTempStyle(layer.name, "fill-extrusion")) == null ? void 0 : _getLayerTempStyle5.paint))) ? "visible" : "none"
+          }),
+          paint: _extends({}, DEFAULT_FILL_PAINT, getLayerTempStyle == null || (_getLayerTempStyle6 = getLayerTempStyle(layer.name, "fill")) == null ? void 0 : _getLayerTempStyle6.paint)
+        }), React.createElement(Layer$1, {
+          key: "polygon-stroke-layer-" + layer.name,
+          id: layer.name + "-stroke",
+          type: "line",
+          "source-layer": "default",
+          beforeId: beforeId,
+          layout: _extends({}, getLayerTempStyle == null || (_getLayerTempStyle7 = getLayerTempStyle(layer.name, "line")) == null ? void 0 : _getLayerTempStyle7.layout, {
+            visibility: visible && (getLayerTempStyle == null || (_getLayerTempStyle8 = getLayerTempStyle(layer.name, "fill-extrusion")) == null || (_getLayerTempStyle8 = _getLayerTempStyle8.settings) == null || (_getLayerTempStyle8 = _getLayerTempStyle8.fill) == null ? void 0 : _getLayerTempStyle8.showBottomSurface) !== false && Boolean(getActualExtrusionHeight(_extends({}, DEFAULT_FILL_EXTRUSION_PAINT, getLayerTempStyle == null || (_getLayerTempStyle9 = getLayerTempStyle(layer.name, "fill-extrusion")) == null ? void 0 : _getLayerTempStyle9.paint))) ? "visible" : "none"
+          }),
+          paint: _extends({}, DEFAULT_LINE_PAINT, getLayerTempStyle == null || (_getLayerTempStyle10 = getLayerTempStyle(layer.name, "line")) == null ? void 0 : _getLayerTempStyle10.paint)
+        }), React.createElement(Layer$1, {
+          key: "polygon-extrusion-layer-" + layer.name,
+          id: layer.name + "-extrusion",
+          type: "fill-extrusion",
+          "source-layer": "default",
+          beforeId: beforeId,
+          minzoom: 0,
+          maxzoom: 23,
+          layout: _extends({}, getLayerTempStyle == null || (_getLayerTempStyle11 = getLayerTempStyle(layer.name, "fill-extrusion")) == null ? void 0 : _getLayerTempStyle11.layout, {
+            visibility
+          }),
+          paint: _extends({}, DEFAULT_FILL_EXTRUSION_PAINT, getLayerTempStyle == null || (_getLayerTempStyle12 = getLayerTempStyle(layer.name, "fill-extrusion")) == null ? void 0 : _getLayerTempStyle12.paint)
+        })];
+
+      case GeometryType.Polyline:
+        return React.createElement(Layer$1, {
+          id: layer.name,
+          type: "line",
+          "source-layer": "default",
+          beforeId: beforeId,
+          layout: _extends({}, getLayerTempStyle == null || (_getLayerTempStyle13 = getLayerTempStyle(layer.name, "line")) == null ? void 0 : _getLayerTempStyle13.layout, {
+            visibility
+          }),
+          paint: _extends({}, DEFAULT_LINE_PAINT, getLayerTempStyle == null || (_getLayerTempStyle14 = getLayerTempStyle(layer.name, "line")) == null ? void 0 : _getLayerTempStyle14.paint)
+        });
+
+      default:
+        return null;
+    }
+  }, [geometryType, layer, beforeId, getLayerTempStyle, visible]);
+  const renderClientStyle = useCallback(() => {
+    return clientStyle.items.map(mockItem => {
+      var _clientStyle$items, _getLayerTempStyle15, _getLayerTempStyle16, _currentSettings$fill, _currentSettings$fill2, _clientStyle$minzoom, _clientStyle$maxzoom, _getLayerTempStyle17, _getLayerTempStyle18;
+
+      const prefixSuffix = getClientStyleItemPrefixSuffix(geometryType, mockItem.type);
+      const isExtrusionItem = mockItem.type === "fill-extrusion";
+      const isPolygonPart = clientStyle.items.some(item => item.type === "fill-extrusion") && (mockItem.type === "fill" || mockItem.type === "line");
+      const fillExtrusionPaint = isPolygonPart || isExtrusionItem ? _extends({}, (_clientStyle$items = clientStyle.items) == null || (_clientStyle$items = _clientStyle$items.find(item => item.type === "fill-extrusion")) == null ? void 0 : _clientStyle$items.paint, getLayerTempStyle == null || (_getLayerTempStyle15 = getLayerTempStyle(layer.name, "fill-extrusion")) == null ? void 0 : _getLayerTempStyle15.paint) : undefined;
+
+      const currentSettings = _extends({}, clientStyle == null ? void 0 : clientStyle.settings, getLayerTempStyle == null || (_getLayerTempStyle16 = getLayerTempStyle(layer.name, mockItem.type)) == null ? void 0 : _getLayerTempStyle16.settings);
+
+      const processedExtrusionHeight = getActualExtrusionHeight(fillExtrusionPaint);
+      const hasExtrusion = Boolean(processedExtrusionHeight);
+      const visibility = visible && (isExtrusionItem && hasExtrusion || !isPolygonPart && !isExtrusionItem || isPolygonPart && (!hasExtrusion || ((_currentSettings$fill = currentSettings == null || (_currentSettings$fill2 = currentSettings.fill) == null ? void 0 : _currentSettings$fill2.showBottomSurface) != null ? _currentSettings$fill : true))) ? "visible" : "none";
+      return React.createElement(Layer$1, {
+        key: "" + prefixSuffix[0] + layer.name,
+        id: "" + layer.name + prefixSuffix[1],
+        type: mockItem.type,
+        "source-layer": "default",
+        beforeId: beforeId,
+        minzoom: (_clientStyle$minzoom = clientStyle == null ? void 0 : clientStyle.minzoom) != null ? _clientStyle$minzoom : 0,
+        maxzoom: (_clientStyle$maxzoom = clientStyle == null ? void 0 : clientStyle.maxzoom) != null ? _clientStyle$maxzoom : 23,
+        layout: _extends({}, mockItem.layout, getLayerTempStyle == null || (_getLayerTempStyle17 = getLayerTempStyle(layer.name, mockItem.type)) == null ? void 0 : _getLayerTempStyle17.layout, {
+          visibility
+        }),
+        paint: _extends({}, mockItem.paint, getLayerTempStyle == null || (_getLayerTempStyle18 = getLayerTempStyle(layer.name, mockItem.type)) == null ? void 0 : _getLayerTempStyle18.paint)
+      });
+    });
+  }, [beforeId, clientStyle, geometryType, layer.name, visible, getLayerTempStyle]);
+  useEffect(onMount, [layer.name]); // eslint-disable-line
+
+  if (!layer) {
+    return null;
+  }
+
+  return React.createElement(Source, {
+    promoteId: idAttribute,
+    id: layer.name,
+    type: "vector",
+    tiles: [tileUrl]
+  }, clientStyle != null && clientStyle.items ? renderClientStyle() : renderLayerByGeometryType());
+};
+
+const Layer = (_ref) => {
+  let {
+    layer,
+    layerType,
+    visible,
+    beforeId,
+    tileUrl,
+    onMount = () => null
+  } = _ref;
+  useEffect(onMount, [layer.name]); // eslint-disable-line
+
+  if (!layer) {
+    return null;
+  }
+
+  if (layerType === "RasterTileLayer") {
+    return React.createElement(RasterLayer, {
+      layer: layer,
+      tileUrl: tileUrl,
+      visible: visible,
+      beforeId: beforeId,
+      onMount: onMount
+    });
+  }
+
+  return React.createElement(VectorLayer, {
+    layer: layer,
+    tileUrl: tileUrl,
+    visible: visible,
+    beforeId: beforeId,
+    onMount: onMount
+  });
+};
+
+var _templateObject$2, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+const ResizablePanelContainer = /*#__PURE__*/styled.div(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  position: relative;\n\n  ", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), (_ref) => {
+  let {
+    horizontal,
+    vertical
+  } = _ref;
+  return horizontal && !vertical ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n          height: 100%;\n        "]))) : !horizontal && vertical ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n          width: 100%;\n        "]))) : "";
+}, (_ref2) => {
+  let {
+    horizontal,
+    vertical
+  } = _ref2;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      will-change: ", ";\n    "])), [horizontal && "width", vertical && "height"].filter(Boolean).join(","));
+}, (_ref3) => {
+  let {
+    maxHeight
+  } = _ref3;
+  return maxHeight && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      max-height: ", "px;\n    "])), maxHeight);
+}, (_ref4) => {
+  let {
+    minHeight
+  } = _ref4;
+  return minHeight && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      min-height: ", "px;\n    "])), minHeight);
+}, (_ref5) => {
+  let {
+    maxWidth
+  } = _ref5;
+  return maxWidth && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      max-width: ", "px;\n    "])), maxWidth);
+}, (_ref6) => {
+  let {
+    height
+  } = _ref6;
+  return height && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), height);
+}, (_ref7) => {
+  let {
+    width
+  } = _ref7;
+  return width && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), width);
+});
+const getHandlePositionProps = (position, palette) => {
+  switch (position) {
+    case HorizontalPosition.Left:
+      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        height: 100%;\n        border-left: 2px solid ", ";\n        top: 0;\n        left: 0;\n        cursor: ew-resize;\n      "])), palette.elementDeep);
+
+    case HorizontalPosition.Right:
+      return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        height: 100%;\n        border-right: 2px solid ", ";\n        top: 0;\n        right: 0;\n        cursor: ew-resize;\n      "])), palette.elementDeep);
+
+    case VerticalPosition.Top:
+      return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        width: 100%;\n        border-top: 2px solid ", ";\n        top: 0;\n        left: 0;\n        cursor: ns-resize;\n      "])), palette.elementDeep);
+
+    case VerticalPosition.Bottom:
+      return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        width: 100%;\n        border-bottom: 2px solid ", ";\n        bottom: 0;\n        left: 0;\n        cursor: ns-resize;\n      "])), palette.elementDeep);
+
+    default:
+      return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        width: 100%;\n        border-top: 2px solid ", ";\n        top: 0;\n        left: 0;\n      "])), palette.elementDeep);
+  }
+};
+const PanelDragHandle = /*#__PURE__*/styled.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  box-sizing: border-box;\n  z-index: 3;\n\n  padding: 0.25rem;\n  pointer-events: ", ";\n  transition: border-color 150ms cubic-bezier(0.2, 1, 0.6, 1);\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  ", "\n"])), (_ref8) => {
+  let {
+    disabled
+  } = _ref8;
+  return disabled && "none";
+}, (_ref9) => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref9;
+  return palette.primary;
+}, (_ref10) => {
+  let {
+    position,
+    theme: {
+      palette
+    }
+  } = _ref10;
+  return getHandlePositionProps(position, palette);
+});
+
+const _excluded$1 = ["className", "handleClassName", "width", "height", "disabled", "handleVerticalPosition", "handleHorizontalPosition", "Handle", "children"];
+const ResizablePanel = (_ref) => {
+  let {
+    className,
+    handleClassName,
+    width,
+    height,
+    disabled,
+    handleVerticalPosition = VerticalPosition.Top,
+    handleHorizontalPosition = HorizontalPosition.Left,
+    children
+  } = _ref,
+      resizeProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+  const resizerProps = useMemo(() => _extends({}, resizeProps, {
+    handleVerticalPosition,
+    handleHorizontalPosition
+  }), [resizeProps, handleVerticalPosition, handleHorizontalPosition]);
+  const {
+    containerRef,
+    verticalHandleRef,
+    horizontalHandleRef,
+    onPointerDown
+  } = useResizer(resizerProps);
+  const {
+    vertical,
+    horizontal
+  } = resizeProps;
+  return React.createElement(ResizablePanelContainer, {
+    ref: containerRef,
+    width: width,
+    height: height,
+    style: disabled ? {
+      height: "auto"
+    } : undefined,
+    className: className
+  }, vertical && React.createElement(PanelDragHandle, {
+    ref: verticalHandleRef,
+    position: handleVerticalPosition,
+    disabled: disabled,
+    className: handleClassName,
+    onPointerDown: onPointerDown
+  }), horizontal && React.createElement(PanelDragHandle, {
+    ref: horizontalHandleRef,
+    position: handleHorizontalPosition,
+    disabled: disabled,
+    className: handleClassName,
+    onPointerDown: onPointerDown
+  }), children);
+};
+
+const ServerNotificationsProvider = (_ref) => {
+  let {
+    url,
+    initialized,
+    children
+  } = _ref;
+  const connection = useServerNotifications(url, initialized);
+  const addSubscription = useCallback(async payload => {
+    if (!connection || connection.state !== "Connected" || !payload) {
+      return;
+    }
+
+    try {
+      const id = await connection.invoke("AddSubscription", payload);
+      console.info("Подписка добавлена, id:", id);
+      return id;
+    } catch (err) {
+      console.info("Ошибка добавления подписки:", err);
+      return Promise.resolve(null);
+    }
+  }, [connection]);
+  const updateSubscription = useCallback(async (id, payload) => {
+    if (!connection || connection.state !== "Connected" || !id || !payload) {
+      return;
+    }
+
+    try {
+      await connection.invoke("UpdateSubscription", id, payload);
+    } catch (err) {
+      console.info("\u041E\u0448\u0438\u0431\u043A\u0430 \u043E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u0434\u043F\u0438\u0441\u043A\u0438 " + id + ":", err);
+    }
+  }, [connection]);
+  const unsubscribeById = useCallback(async id => {
+    if (!connection || connection.state !== "Connected" || !id) {
+      return;
+    }
+
+    try {
+      await connection.invoke("Unsubscribe", [id]);
+    } catch (err) {
+      console.info("\u041E\u0448\u0438\u0431\u043A\u0430 \u043E\u0442\u043F\u0438\u0441\u043A\u0438 \u043F\u043E " + id + ":", err);
+    }
+  }, [connection]);
+  return React.createElement(ServerNotificationsContext.Provider, {
+    value: {
+      connection,
+      addSubscription,
+      updateSubscription,
+      unsubscribeById
+    }
+  }, children);
+};
+
+export { BaseMapTheme, BuildingsLayer, DateFormat, ErrorBoundary, GeometryEditorMode, GeometrySelectionRouteTypes, GeometrySelectionToolTypes, GeometrySelectionTypes, GeometrySelectionZoneTypes, HorizontalPosition, Layer, Map, MapContext, MapProvider, NO_CONTENT_VALUE, ResizablePanel, ServerNotificationsContext, ServerNotificationsProvider, VerticalPosition, convertSpToTurfFeature, drawModeToGeometrySelectionType, findAttributeInExpression, formatDate, geometryToWkt, getActualExtrusionHeight, getDate, getGeometrySelectionTurfFeature, isNumeric, isObject, parseClientStyle, useCurrentSelectedFeature, useEditingFeature, useEwktGeometry, useGeometryEditor, useGeometrySelection, useGeometrySelectionBuffer, useMapContext, useMapDraw, useRedrawLayer, useResizer, useSelectFeaturesCount, useSelectFeaturesCurrentIndex, useSelectFeaturesGeometryMasking, useSelectFeaturesInitialized, useSelectFeaturesLayerName, useSelectFeaturesPagination, useSelectFeaturesStatisticsActive, useSelectFeaturesTotalCounts, useSelectedFeatures, useServerNotifications, useServerNotificationsContext, useToggle, useUpdateCurrentFeature, useZoomToFeatures, useZoomToLayer, useZoomToPoint };
 //# sourceMappingURL=react.esm.js.map