@evergis/react 3.1.2 → 3.1.3

package/dist/react.esm.js

@@ -1,103 +1,197 @@
-import { isEmpty, isNil } from 'lodash-es';
-import { GeometryType } from '@evergis/api';
-import { polygon, multiLineString, multiPoint, point, bbox, toWgs84, lineString, toMercator } from '@turf/turf';
-import { useContext, useMemo, createContext, useCallback, useEffect, useRef, useState, useLayoutEffect } from 'react';
-import 'styled-components';
-import 'react-map-gl/mapbox';
+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 'find-and';
+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 findAttributeInExpression = expression => {
-  if (Array.isArray(expression) && expression.length === 2 && expression[0] === "get") {
-    return [expression[1]];
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
   }
+}
 
-  return expression.reduce((acc, curr) => {
-    if (!Array.isArray(curr)) {
-      return acc;
+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];
+        }
+      }
     }
 
-    if (curr[0] === "get") {
-      return [...new Set([...acc, curr[1]])];
+    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);
+}
 
-    return [...new Set([...acc, ...findAttributeInExpression(curr)])];
-  }, []);
-};
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
 
-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"];
-};
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
 
-const parseClientStyle = style => {
-  var _style$items;
+  return _setPrototypeOf(o, p);
+}
 
-  if (!style) {
-    return [];
+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 style == null || (_style$items = style.items) == null ? void 0 : _style$items.reduce((acc, curr) => {
-    var _Object$entries;
+  return target;
+}
 
-    if (!curr.paint || isEmpty(curr.paint)) {
-      return acc;
-    }
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
 
-    return (_Object$entries = Object.entries(curr.paint)) == null ? void 0 : _Object$entries.reduce((paintAcc, _ref) => {
-      let [, value] = _ref;
+  return self;
+}
 
-      if (!Array.isArray(value)) {
-        return paintAcc;
-      }
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  }
 
-      return [...new Set([...paintAcc, ...findAttributeInExpression(value)])];
-    }, []);
-  }, []);
-};
+  return _assertThisInitialized(self);
+}
 
-const convertSpToTurfFeature = geometry => {
-  if (!geometry) {
-    return;
+function _taggedTemplateLiteralLoose(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
   }
 
-  switch (geometry.type) {
-    case GeometryType.Point:
-      return point(geometry.coordinates);
+  strings.raw = raw;
+  return strings;
+}
 
-    case GeometryType.Multipoint:
-      return multiPoint(geometry.coordinates);
+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"])));
 
-    case GeometryType.Polyline:
-      return multiLineString(geometry.coordinates);
+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;
 
-    case GeometryType.Polygon:
-    case GeometryType.Envelope:
-      return polygon(geometry.coordinates);
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
   }
-};
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+  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;
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
+    _classCallCheck(this, ErrorBoundary);
 
-    return target;
-  };
+    _this2 = _callSuper(this, ErrorBoundary, arguments);
+    _this2.state = {
+      hasError: false
+    };
+    return _this2;
+  }
 
-  return _extends.apply(this, arguments);
-}
+  _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);
@@ -170,6 +264,206 @@ var GeometryEditorMode;
   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,
@@ -578,6 +872,117 @@ const useUpdateCurrentFeature = () => {
   }, [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
@@ -789,47 +1194,485 @@ const useToggle = initial => {
   return [state, toggle, setState];
 };
 
-const drawModeToGeometrySelectionType = mode => {
-  switch (mode) {
-    case "draw_point":
-      return GeometrySelectionTypes.Point;
+const _excluded = ["zIndex", "lowerSiblings", "upperSiblings", "drawTriggerDeps", "onError", "children"];
+const Map = (_ref) => {
+  let {
+    zIndex,
+    lowerSiblings,
+    upperSiblings,
+    drawTriggerDeps,
+    onError,
+    children
+  } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-    case "draw_polygon":
-      return GeometrySelectionTypes.Polygon;
+  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);
+};
 
-    case "draw_line_string":
-      return GeometrySelectionTypes.Line;
+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 GeometrySelectionTypes.Point;
+      return ["", ""];
   }
 };
 
-const getGeometrySelectionTurfFeature = (coordinates, selectionType, toWgs) => {
-  if (toWgs) {
-    switch (selectionType) {
-      case GeometrySelectionTypes.Point:
-        return toWgs84(point(coordinates));
+const VectorLayer = (_ref) => {
+  var _layer$configuration;
 
-      case GeometrySelectionTypes.Polygon:
-        return toWgs84(polygon(coordinates));
+  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 GeometrySelectionTypes.Line:
-        return toWgs84(lineString(coordinates));
+      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;
   }
 
-  switch (selectionType) {
-    case GeometrySelectionTypes.Point:
-      return toMercator(point(coordinates));
+  return React.createElement(Source, {
+    promoteId: idAttribute,
+    id: layer.name,
+    type: "vector",
+    tiles: [tileUrl]
+  }, clientStyle != null && clientStyle.items ? renderClientStyle() : renderLayerByGeometryType());
+};
 
-    case GeometrySelectionTypes.Polygon:
-      return toMercator(polygon(coordinates));
+const Layer = (_ref) => {
+  let {
+    layer,
+    layerType,
+    visible,
+    beforeId,
+    tileUrl,
+    onMount = () => null
+  } = _ref;
+  useEffect(onMount, [layer.name]); // eslint-disable-line
 
-    case GeometrySelectionTypes.Line:
-      return toMercator(lineString(coordinates));
+  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 { DateFormat, HorizontalPosition, NO_CONTENT_VALUE, 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 };
+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