@evergis/react 2.0.137 → 2.0.139

package/dist/react.esm.js

@@ -42,7 +42,7 @@ import { GridClusterProvider } from '@evergis/sgis/es/layers/clusterProviders/Gr
 import { PointEditor } from '@evergis/sgis/es/controls/PointEditor';
 import { debounce } from '@evergis/sgis/es/utils/utils';
 import styled, { css } from 'styled-components';
-import { Icon, useToggle } from '@evergis/ui';
+import { Icon, isNumeric, useToggle } from '@evergis/ui';
 import punycode from 'punycode';
 import { TileLayer as TileLayer$1 } from '@evergis/sgis/es/layers/TileLayer';
 
@@ -3449,10 +3449,9 @@ const useMapLegend = (layer, config) => {
     return null;
   }
 
-  const firstLegend = legend.items[0];
   return {
     symbol: legend.symbol,
-    item: firstLegend
+    items: legend.items
   };
 };
 
@@ -4726,7 +4725,7 @@ const LegendContainer = /*#__PURE__*/styled.div(_templateObject$2 || (_templateO
 const LegendSectionContainer = /*#__PURE__*/styled.div(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 const LegendSymbolTitle = /*#__PURE__*/styled.p(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])));
 const LegendValueContainer = /*#__PURE__*/styled.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 0.75rem;\n\n  ", " {\n    padding-left: 0.5rem;\n  }\n"])), LegendSymbolTitle);
-const LegendSectionHeader = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n  font-weight: 500;\n"])));
+const LegendSectionHeader = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1rem;\n"])));
 
 const LegendSection = _ref => {
   let {
@@ -4991,23 +4990,43 @@ const Fullscreen = () => {
   }));
 };
 
-var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1;
+var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1;
 const MapLegendControl = /*#__PURE__*/styled(MapControl)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
 const MapLegendContainer = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 12.5rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1.625rem;\n    width: 1.625rem;\n  }\n"])));
 const MapLegendHeader = /*#__PURE__*/styled(LegendSectionHeader)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 15rem;\n  margin-bottom: 0.25rem;\n  font-weight: 500;\n"])));
-const MapLegendValueDescr = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n"])));
-const MapLegendItems = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  border-radius: 0.125rem;\n"])));
-const MapLegendItem = /*#__PURE__*/styled.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 1rem;\n  background-color: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n"])), _ref => {
+const MapLegendValueDescr = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1rem;\n"])));
+const MapLegendItem = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 1rem;\n  background: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n  margin-right: -1px;\n  \n  ", "\n"])), _ref => {
   let {
     value
   } = _ref;
-  return value;
+  return typeof value === "number" ? "none" : value;
+}, _ref2 => {
+  let {
+    value
+  } = _ref2;
+  return !!value && typeof value === "number" && SizeLegendMixin(value);
+});
+const MapLegendOther = /*#__PURE__*/styled(MapLegendItem)(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: none;\n  width: 1rem;\n  margin-left: 0.25rem;\n  border-radius: 0.125rem;\n"])));
+const SizeOverlayLegendMixin = /*#__PURE__*/css(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 2rem;\n  height: 2rem;\n  \n  ", ", ", " {\n    flex: none;\n    position: absolute;\n    top: 0;\n    left: 50%;\n    width: inherit;\n    height: inherit;\n    margin-left: -1rem;\n    \n    :after {\n      top: 0;\n      margin-top: 0;\n    }\n  }\n"])), MapLegendItem, MapLegendOther);
+const MapLegendItems = /*#__PURE__*/styled.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  border-radius: 0.125rem;\n\n  ", ";\n"])), _ref3 => {
+  let {
+    overlay
+  } = _ref3;
+  return overlay && SizeOverlayLegendMixin;
 });
-const MapLegendOther = /*#__PURE__*/styled(MapLegendItem)(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: none;\n  width: 1rem;\n  margin-left: 0.25rem;\n  border-radius: 0.125rem;\n  overflow: hidden;\n"])));
-const MapLegendValues = /*#__PURE__*/styled.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  font-size: 0.75rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
-const MapLegendValuesRange = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
-const MapLegendValuesOther = /*#__PURE__*/styled(MapLegendOther)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 0;\n  text-align: center;\n  overflow: visible;\n"])));
-const MapLegendExpandButton = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin: 0.1rem 0 0.5rem;\n  font-size: 0.625rem;\n  color: #1FB3AA;\n"])));
+
+const SizeLegendMixin = function SizeLegendMixin(value) {
+  if (value === void 0) {
+    value = 0;
+  }
+
+  return css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 2rem;\n  background: none;\n  border: none;\n  margin-right: 0;\n  \n  :after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    border: 1px rgba(48, 69, 79, 0.28) solid;\n    border-radius: 50%;\n    margin: -", "px 0 0 -", "px;\n    width: ", "px;\n    height: ", "px;\n  }\n"])), value / 2, value / 2, value, value);
+};
+
+const MapLegendValues = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  font-size: 0.75rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
+const MapLegendValuesRange = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
+const MapLegendValuesOther = /*#__PURE__*/styled(MapLegendOther)(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 0;\n  text-align: center;\n  overflow: visible;\n"])));
+const MapLegendExpandButton = /*#__PURE__*/styled.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin: 0.1rem 0 0.5rem;\n  font-size: 0.625rem;\n  color: #1FB3AA;\n"])));
 
 const getValueFromLegendTitle = (title, minOrMax) => {
   var _title$split;
@@ -5017,11 +5036,33 @@ const getValueFromLegendTitle = (title, minOrMax) => {
     return minOrMax === "min" ? result == null ? void 0 : result[0] : result == null ? void 0 : result[1];
   }
 
-  return (title == null ? void 0 : (_title$split = title.split(" ")) == null ? void 0 : _title$split[1]) || "";
+  return (title == null ? void 0 : (_title$split = title.split(" ")) == null ? void 0 : _title$split.find(isNumeric)) || "";
+};
+
+const MinimizedLegend = _ref => {
+  var _currentValues$, _currentValues;
+
+  let {
+    values,
+    title,
+    overlay
+  } = _ref;
+  const currentValues = [...values];
+  const other = currentValues.pop();
+  return React.createElement(React.Fragment, null, !!title && React.createElement(MapLegendValueDescr, null, title), React.createElement(MapLegendItems, {
+    overlay: overlay
+  }, currentValues.map(value => React.createElement(MapLegendItem, {
+    key: value.title,
+    title: value.title,
+    value: value.parameterValue
+  })), React.createElement(MapLegendOther, {
+    title: "\u0414\u0440\u0443\u0433\u043E\u0435",
+    value: other == null ? void 0 : other.parameterValue
+  })), typeof (other == null ? void 0 : other.parameterValue) === "string" && React.createElement(MapLegendValues, null, React.createElement(MapLegendValuesRange, null, React.createElement("div", null, getValueFromLegendTitle((_currentValues$ = currentValues[0]) == null ? void 0 : _currentValues$.title, "max")), React.createElement("div", null, getValueFromLegendTitle((_currentValues = currentValues[currentValues.length - 1]) == null ? void 0 : _currentValues.title, "min"))), React.createElement(MapLegendValuesOther, null, "-")));
 };
 
 const MapLegend = _ref => {
-  var _symbol$fill, _item$values$, _item$values;
+  var _items$0$parameter;
 
   let {
     layer,
@@ -5037,22 +5078,29 @@ const MapLegend = _ref => {
 
   const {
     symbol,
-    item
+    items
   } = legend;
+  const isValidClassify = !((_items$0$parameter = items[0].parameter) != null && _items$0$parameter.includes("labelSymbol"));
   return React.createElement(LegendProvider, {
     symbol: symbol
   }, React.createElement(MapLegendControl, {
     className: className
-  }, React.createElement(MapLegendHeader, null, layer == null ? void 0 : layer.alias), React.createElement(MapLegendContainer, null, isExpanded ? React.createElement(Legend, {
-    layer: layer
-  }) : React.createElement(React.Fragment, null, item.title !== (layer == null ? void 0 : layer.alias) && React.createElement(MapLegendValueDescr, null, item.title), React.createElement(MapLegendItems, null, item.values.map(value => React.createElement(MapLegendItem, {
-    key: value.title,
-    title: value.title,
-    value: value.parameterValue
-  })), React.createElement(MapLegendOther, {
-    title: "\u0414\u0440\u0443\u0433\u043E\u0435",
-    value: (_symbol$fill = symbol.fill) == null ? void 0 : _symbol$fill.color
-  })), React.createElement(MapLegendValues, null, React.createElement(MapLegendValuesRange, null, React.createElement("div", null, getValueFromLegendTitle((_item$values$ = item.values[0]) == null ? void 0 : _item$values$.title, "max")), React.createElement("div", null, getValueFromLegendTitle((_item$values = item.values[item.values.length - 1]) == null ? void 0 : _item$values.title, "min"))), React.createElement(MapLegendValuesOther, null, "-"))), React.createElement(MapLegendExpandButton, {
+  }, React.createElement(MapLegendHeader, null, layer == null ? void 0 : layer.alias), isValidClassify && React.createElement(MapLegendContainer, null, isExpanded ? React.createElement(Legend, {
+    layer: layer,
+    config: config
+  }) : React.createElement(React.Fragment, null, items.map(item => {
+    var _symbol$fill, _item$parameter, _symbol$fill2;
+
+    return React.createElement(React.Fragment, null, React.createElement(MinimizedLegend, {
+      values: item.values,
+      defaultValue: (_symbol$fill = symbol.fill) == null ? void 0 : _symbol$fill.color,
+      title: item.title !== (layer == null ? void 0 : layer.alias) ? item.title : ""
+    }), ((_item$parameter = item.parameter) == null ? void 0 : _item$parameter.includes("size")) && React.createElement(MinimizedLegend, {
+      values: item.values,
+      defaultValue: (_symbol$fill2 = symbol.fill) == null ? void 0 : _symbol$fill2.color,
+      overlay: true
+    }));
+  })), React.createElement(MapLegendExpandButton, {
     onClick: toggleExpanded
   }, isExpanded ? "Свернуть" : "Развернуть"))));
 };