@evergis/react 2.0.198 → 2.0.201

package/dist/components/Legend/hooks/useSvgSymbol.d.ts

@@ -2,15 +2,15 @@
 import { Color } from '@evergis/color/es/Color';
 import { SvgPointSymbol } from '../../../core';
 import { SvgEditorField, SvgSymbolBg } from '../types';
-export declare const useSvgSymbol: (symbol: SvgPointSymbol, skipOffset?: boolean | undefined, isClassifiedValue?: boolean | undefined) => {
+export declare const useSvgSymbol: (symbol: SvgPointSymbol, skipOffset?: boolean | undefined, isClassified?: boolean | undefined) => {
     svgRef: import("react").MutableRefObject<HTMLElement | null>;
     initSvg: () => void;
     getSvgData: () => string;
-    manipulateSvg: ({ svg, bg, newSymbol, isClassifiedValue, }: {
+    manipulateSvg: ({ svg, bg, newSymbol, isClassified, }: {
         svg: string;
         bg?: SvgSymbolBg | undefined;
         newSymbol?: import("../../../core").ClientSymbol<"svgPointSymbol", import("@evergis/api").SvgPointSymbolDc, never> | undefined;
-        isClassifiedValue?: boolean | undefined;
+        isClassified?: boolean | undefined;
     }) => void;
     getUpdatedSvgSymbol: (field: keyof SvgEditorField, value: Color | number | string) => any;
 };

package/dist/components/Legend/types.d.ts

@@ -5,7 +5,7 @@ import { H3Symbol } from '@evergis/sgis/es/symbols/H3Symbol';
 import { Coordinates } from '@evergis/sgis/es/baseTypes';
 import { ClassificationParameterExtended, LayerAttribute, LegendValueType, ParameterByAttribute, ParameterValueWithSymbol, StyleSymbolType, SvgPointSymbol } from '../../core';
 import { SGisBrushFill, SGisImageFill, SGisPolygonSymbol, SGisPolylineSymbol } from '../../symbols';
-export declare type ClassifyParameter = 'fill.color' | 'fill.hatchColor' | 'fillColor' | 'stroke.width' | 'stroke.color' | 'strokeWidth' | 'strokeColor' | 'textBackground.fill.color' | 'background.fillColor' | 'background.strokeColor' | 'background.strokeWidth' | 'figure.fillColor' | 'figure.strokeColor' | 'figure.strokeWidth' | 'fontColor' | 'haloColor' | 'size' | 'symbol' | 'angle' | 'maskedColor' | 'endingSize' | 'beginningSize' | 'maxObjectCount' | 'gridSize' | 'selectionObjectsLimit' | 'singleObjectSymbol.figure.fillColor' | 'singleObjectSymbol.background.fillColor';
+export declare type ClassifyParameter = 'fill.color' | 'fill.hatchColor' | 'fillColor' | 'stroke.width' | 'stroke.color' | 'strokeWidth' | 'strokeColor' | 'textBackground.fill.color' | 'background.fillColor' | 'background.strokeColor' | 'background.strokeWidth' | 'figure.fillColor' | 'figure.strokeColor' | 'figure.strokeWidth' | 'fontColor' | 'haloColor' | 'size' | 'symbol' | 'angle' | 'maskedColor' | 'endingSize' | 'beginningSize' | 'maxObjectCount' | 'gridSize' | 'selectionObjectsLimit' | 'singleObjectSymbol.figure.fillColor' | 'singleObjectSymbol.figure.strokeColor' | 'singleObjectSymbol.figure.strokeWidth' | 'singleObjectSymbol.background.fillColor' | 'singleObjectSymbol.background.strokeColor' | 'singleObjectSymbol.background.strokeWidth';
 export interface ParameterInfo {
     min: number;
     max: number;
@@ -71,7 +71,7 @@ export declare type SvgSymbolProps = {
     text?: string;
     bg?: SvgSymbolBg;
     skipOffset?: boolean;
-    isClassifiedValue?: boolean;
+    isClassified?: boolean;
     fontSettings?: PointLabelSymbolDc;
     onClick?: (svg: string, symbol: SvgPointSymbol) => void;
 };

package/dist/react.cjs.development.js

@@ -3147,7 +3147,7 @@ const DEFAULT_CLUSTER_SVG = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox
 const SYMBOL_CLASSIFICATION = {
   [api.GeometryType.Polygon]: ['fill.color', 'stroke.color', 'stroke.width'],
   [api.GeometryType.Polyline]: ['stroke.color', 'stroke.width'],
-  [api.GeometryType.Point]: ['angle', 'size', 'fill.color', 'fillColor', 'background.fillColor', 'background.strokeColor', 'background.strokeWidth', 'figure.fillColor', 'figure.strokeColor', 'figure.strokeWidth', 'singleObjectSymbol.figure.fillColor', 'singleObjectSymbol.background.fillColor']
+  [api.GeometryType.Point]: ['angle', 'size', 'fill.color', 'fillColor', 'background.fillColor', 'background.strokeColor', 'background.strokeWidth', 'figure.fillColor', 'figure.strokeColor', 'figure.strokeWidth', 'singleObjectSymbol.figure.fillColor', 'singleObjectSymbol.figure.strokeColor', 'singleObjectSymbol.figure.strokeWidth', 'singleObjectSymbol.background.fillColor', 'singleObjectSymbol.background.strokeColor', 'singleObjectSymbol.background.strokeWidth']
 };
 const SYMBOL_LIMITS = {
   SIZE_MIN: 1,
@@ -3223,6 +3223,7 @@ const textComparisonOperators = [...BASE_OPERATORS, ...CONTAINS_OPERATORS, ...ST
   SvgSymbolBg["Circle"] = "circle";
 })(exports.SvgSymbolBg || (exports.SvgSymbolBg = {}));
 
+const DEFAULT_STROKE_OPACITY = 0.28;
 const convertSvgToBase64 = svg => "data:image/svg+xml;base64," + window.btoa(svg);
 const createSvgGradient = (svg, values) => svg.gradient('linear', add => {
   values == null ? void 0 : values.forEach((_ref, index) => {
@@ -3241,7 +3242,7 @@ const manipulateSvgSymbol = _ref2 => {
     symbol,
     svg,
     bg,
-    isClassifiedValue
+    isClassified
   } = _ref2;
   if (!symbol) return SVGContainer;
   const symbolData = getParameterValue(svg || symbol.data);
@@ -3292,9 +3293,9 @@ const manipulateSvgSymbol = _ref2 => {
         SVGContainer.find(':not(#symbol-bg)').each(item => item.center(DEFAULT_SYMBOL_WITH_BG_SIZE / 2, DEFAULT_SYMBOL_WITH_BG_SIZE / 2).fill('white'));
         const symbolBg = SVGContainer.find('#symbol-bg')[0];
 
-        if (isClassifiedValue) {
+        if (isClassified) {
           symbolBg == null ? void 0 : symbolBg.stroke({
-            opacity: 0.28
+            opacity: DEFAULT_STROKE_OPACITY
           });
         } // eslint-disable-next-line max-depth
 
@@ -3302,15 +3303,15 @@ const manipulateSvgSymbol = _ref2 => {
         if (isParameterByAttribute(background == null ? void 0 : background.fillColor)) {
           var _background$fillColor;
 
-          const gradient = createSvgGradient(SVGContainer, background == null ? void 0 : (_background$fillColor = background.fillColor) == null ? void 0 : _background$fillColor.values);
-          symbolBg == null ? void 0 : symbolBg.fill(gradient);
+          symbolBg == null ? void 0 : symbolBg.fill(createSvgGradient(SVGContainer, background == null ? void 0 : (_background$fillColor = background.fillColor) == null ? void 0 : _background$fillColor.values));
+        }
 
-          if (isParameterByAttribute(background == null ? void 0 : background.strokeColor)) {
-            symbolBg == null ? void 0 : symbolBg.stroke({
-              color: gradient,
-              opacity: 0.28
-            });
-          }
+        if (isParameterByAttribute(background == null ? void 0 : background.strokeColor)) {
+          var _background$strokeCol;
+
+          symbolBg == null ? void 0 : symbolBg.stroke({
+            color: createSvgGradient(SVGContainer, background == null ? void 0 : (_background$strokeCol = background.strokeColor) == null ? void 0 : _background$strokeCol.values)
+          });
         }
       } else {
         SVGContainer.svg(innerSvg);
@@ -3326,6 +3327,20 @@ const manipulateSvgSymbol = _ref2 => {
           color: strokeColor,
           width: strokeWidth
         });
+
+        if (isParameterByAttribute(figure == null ? void 0 : figure.fillColor)) {
+          var _figure$fillColor;
+
+          item == null ? void 0 : item.fill(createSvgGradient(SVGContainer, figure == null ? void 0 : (_figure$fillColor = figure.fillColor) == null ? void 0 : _figure$fillColor.values));
+        }
+
+        if (isParameterByAttribute(figure == null ? void 0 : figure.strokeColor)) {
+          var _figure$strokeColor;
+
+          item == null ? void 0 : item.stroke({
+            color: createSvgGradient(SVGContainer, figure == null ? void 0 : (_figure$strokeColor = figure.strokeColor) == null ? void 0 : _figure$strokeColor.values)
+          });
+        }
       });
     }
   }
@@ -4369,6 +4384,8 @@ function deserializeSvgPointSymbolParams(_ref) {
     })
   } : {}, figure ? {
     figure: _extends({}, figure, {
+      strokeColor: deserializeColor(getParameterValue(figure == null ? void 0 : figure.strokeColor)),
+      strokeWidth: getParameterValue(figure == null ? void 0 : figure.strokeWidth),
       fillColor: deserializeColor(getParameterValue(figure == null ? void 0 : figure.fillColor))
     })
   } : {});
@@ -6030,7 +6047,7 @@ const MapLegendValuesOther = /*#__PURE__*/styled__default(MapLegendOther)(_templ
 const MapLegendExpandButton = /*#__PURE__*/styled__default.div(_templateObject37 || (_templateObject37 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-top: 0.1rem;\n  font-size: 0.625rem;\n  color: #1fb3aa;\n"])));
 const ClusterLegendContainer = /*#__PURE__*/styled__default.div(_templateObject38 || (_templateObject38 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: -0.9rem;\n  transform: scale(0.5);\n"])));
 
-const useSvgSymbol = (symbol, skipOffset, isClassifiedValue) => {
+const useSvgSymbol = (symbol, skipOffset, isClassified) => {
   const SVGWrapperRefElement = React.useRef(null);
   const SVGContainer = React.useMemo(() => svg_js.SVG(), []);
   const initSvg = React.useCallback(() => {
@@ -6042,14 +6059,14 @@ const useSvgSymbol = (symbol, skipOffset, isClassifiedValue) => {
       svg,
       bg,
       newSymbol,
-      isClassifiedValue
+      isClassified
     } = _ref;
     manipulateSvgSymbol({
       SVGContainer,
       symbol: newSymbol || symbol,
       svg,
       bg,
-      isClassifiedValue
+      isClassified
     });
   }, [SVGContainer, symbol]);
   const getUpdatedSvgSymbol = React.useCallback((field, value) => {
@@ -6090,7 +6107,7 @@ const useSvgSymbol = (symbol, skipOffset, isClassifiedValue) => {
       svg: getParameterValue(data),
       newSymbol,
       bg: (_newSymbol$background = newSymbol.background) == null ? void 0 : _newSymbol$background.type,
-      isClassifiedValue
+      isClassified
     });
     return _extends({}, newSymbol, {
       data: SVGContainer.svg()
@@ -6147,7 +6164,7 @@ const SvgSymbol = /*#__PURE__*/React.memo(_ref7 => {
     text,
     fontSettings,
     skipOffset,
-    isClassifiedValue,
+    isClassified,
     onClick
   } = _ref7;
   const {
@@ -6155,7 +6172,7 @@ const SvgSymbol = /*#__PURE__*/React.memo(_ref7 => {
     initSvg,
     getSvgData,
     manipulateSvg
-  } = useSvgSymbol(symbol, skipOffset, isClassifiedValue);
+  } = useSvgSymbol(symbol, skipOffset, isClassified);
   const onSelectSymbol = React.useCallback(() => {
     onClick == null ? void 0 : onClick(getSvgData(), _extends({}, symbol, bg ? {
       background: _extends({}, symbol.background, {
@@ -6176,9 +6193,9 @@ const SvgSymbol = /*#__PURE__*/React.memo(_ref7 => {
       svg,
       bg,
       newSymbol: symbol,
-      isClassifiedValue
+      isClassified
     });
-  }, [svg, symbol, bg, manipulateSvg, isClassifiedValue]);
+  }, [svg, symbol, bg, manipulateSvg, isClassified]);
   return text ? React__default.createElement(SvgSymbolContainer, null, renderSymbol, React__default.createElement(SvgSymbolLabel, {
     fontSettings: fontSettings
   }, text), !!(fontSettings != null && fontSettings.haloColor) && !!(fontSettings != null && fontSettings.haloWidth) && React__default.createElement(SvgSymbolLabel, {
@@ -6218,7 +6235,7 @@ const ClusterSymbolPreview = _ref => {
   return React__default.createElement(SvgSymbol, {
     svg: DEFAULT_CLUSTER_SVG,
     symbol: svgSymbol,
-    isClassifiedValue: isClassifiedValue,
+    isClassified: isClassified,
     text: '99',
     fontSettings: _extends({}, symbol.labelSymbol, {
       fontSize: fontSize || ((_symbol$labelSymbol = symbol.labelSymbol) == null ? void 0 : _symbol$labelSymbol.fontSize)