@evergis/react 2.0.192 → 2.0.194

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

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

package/dist/react.cjs.development.js

@@ -2582,11 +2582,17 @@ const checkLayerHasLegend = layerInfo => {
     return (paramValue == null ? void 0 : paramValue.type) === 'byAttribute';
   })) || false;
 };
-const getTitleFromCondition = condition => {
+const getTitleFromCondition = _ref2 => {
   var _parts$;
 
+  let {
+    condition,
+    attribute,
+    formatValue
+  } = _ref2;
   const parts = condition == null ? void 0 : condition.split(' == ');
-  return (parts == null ? void 0 : (_parts$ = parts[1]) == null ? void 0 : _parts$.slice(1, -1)) || '';
+  const uniqueValue = (parts == null ? void 0 : (_parts$ = parts[1]) == null ? void 0 : _parts$.slice(1, -1)) || '';
+  return attribute && formatValue ? formatValue(attribute.type, uniqueValue, attribute.stringFormat) : uniqueValue;
 };
 function createValueTitleFromCondition(paramValue, attribute, formatValue, index) {
   if (!attribute) return '';
@@ -2905,7 +2911,9 @@ const getMinimizedLegendValues = (attribute, classified, formatValue, index, oth
     }
 
     result.uniqueValue = formatValue ? formatValue(attribute.type, paramValue.value, attribute.stringFormat) : paramValue.value.toString();
-    result.title = getTitleFromCondition(paramValue.condition);
+    result.title = getTitleFromCondition({
+      condition: paramValue.condition
+    });
     result.hiddenCondition = createHiddenCondition(attribute.name, attribute.type, getClassificationValue(paramValue.value, result.title, new ClassificationCondition(paramValue.condition)));
     return result;
   });
@@ -2926,7 +2934,9 @@ const getMaximizedLegendValues = (attribute, param, params, classified, symbol,
     const result = {
       symbol: createLegendSymbol(paramValue.value, param, params, symbol)
     };
-    result.title = isRangeCondition(paramValue.condition) ? createValueTitleFromCondition(paramValue, attribute, formatValue, sectionIndex) : getTitleFromCondition(paramValue.condition);
+    result.title = isRangeCondition(paramValue.condition) ? createValueTitleFromCondition(paramValue, attribute, formatValue, sectionIndex) : getTitleFromCondition({
+      condition: paramValue.condition
+    });
     result.hiddenCondition = createHiddenCondition(attribute.name, attribute.type, getClassificationValue(paramValue.value, result.title, new ClassificationCondition(classified.values[index].condition)));
     return result;
   });
@@ -3212,7 +3222,7 @@ const textComparisonOperators = [...BASE_OPERATORS, ...CONTAINS_OPERATORS, ...ST
 })(exports.SvgSymbolBg || (exports.SvgSymbolBg = {}));
 
 const convertSvgToBase64 = svg => "data:image/svg+xml;base64," + window.btoa(svg);
-const createSvgGradient = (svg, values) => svg.gradient("linear", add => {
+const createSvgGradient = (svg, values) => svg.gradient('linear', add => {
   values == null ? void 0 : values.forEach((_ref, index) => {
     let {
       value
@@ -3234,8 +3244,8 @@ const manipulateSvgSymbol = (SVGContainer, symbol, svg, bg) => {
     background,
     figure
   } = symbol;
-  const isUploadedFile = !bg && !symbolData.includes("symbol-bg") && !symbolData.includes("symbol-figure");
-  const innerSvg = symbolData.replace(/<\?xml[^?]*\?>|<svg[^>]*>|<\/svg>/g, "");
+  const isUploadedFile = !bg && !symbolData.includes('symbol-bg') && !symbolData.includes('symbol-figure');
+  const innerSvg = symbolData.replace(/<\?xml[^?]*\?>|<svg[^>]*>|<\/svg>/g, '');
 
   if (isUploadedFile) {
     var _$exec;
@@ -3249,11 +3259,11 @@ const manipulateSvgSymbol = (SVGContainer, symbol, svg, bg) => {
 
     SVGContainer.size(size);
   } else {
-    const hasBg = bg || (innerSvg == null ? void 0 : innerSvg.includes("symbol-bg"));
+    const hasBg = bg || (innerSvg == null ? void 0 : innerSvg.includes('symbol-bg'));
     let defaultSize = hasBg ? DEFAULT_SYMBOL_WITH_BG_SIZE : DEFAULT_SYMBOL_SIZE;
     const currentSize = size || defaultSize;
     let viewBox = [0, 0, defaultSize, defaultSize];
-    const strokeWidth = getParameterValue(background == null ? void 0 : background.strokeWidth) || (typeof (background == null ? void 0 : background.strokeColor) === "object" ? 1 : 0);
+    const strokeWidth = getParameterValue(background == null ? void 0 : background.strokeWidth) || (typeof (background == null ? void 0 : background.strokeColor) === 'object' ? 1 : 0);
 
     if (strokeWidth) {
       defaultSize += strokeWidth;
@@ -3261,7 +3271,7 @@ const manipulateSvgSymbol = (SVGContainer, symbol, svg, bg) => {
     }
 
     if (hasBg) {
-      SVGContainer.size(currentSize + "px", currentSize + "px").viewbox(viewBox.join(" "));
+      SVGContainer.size(currentSize + "px", currentSize + "px").viewbox(viewBox.join(' '));
       const currentBg = bg || (background == null ? void 0 : background.type);
 
       if (currentBg) {
@@ -3269,23 +3279,32 @@ const manipulateSvgSymbol = (SVGContainer, symbol, svg, bg) => {
         const fillColor = getParameterValue(background == null ? void 0 : background.fillColor);
         SVGContainer.svg(currentBg === exports.SvgSymbolBg.Circle ? "<circle\n                id=\"symbol-bg\"\n                cx=\"" + DEFAULT_SYMBOL_WITH_BG_SIZE / 2 + "\"\n                cy=\"" + DEFAULT_SYMBOL_WITH_BG_SIZE / 2 + "\"\n                r=\"" + DEFAULT_SYMBOL_WITH_BG_SIZE / 2 + "\"\n                fill=\"" + (fillColor || DEFAULT_SYMBOL_FILL_COLOR) + "\"\n                stroke=\"" + (strokeColor || DEFAULT_SYMBOL_STROKE_COLOR) + "\"\n                stroke-width=\"" + strokeWidth + "\"\n              />" : "<rect\n                id=\"symbol-bg\"\n                width=\"" + DEFAULT_SYMBOL_WITH_BG_SIZE + "\"\n                height=\"" + DEFAULT_SYMBOL_WITH_BG_SIZE + "\"\n                rx=\"4\"\n                fill=\"" + (fillColor || DEFAULT_SYMBOL_FILL_COLOR) + "\"\n                stroke=\"" + (strokeColor || DEFAULT_SYMBOL_STROKE_COLOR) + "\"\n                stroke-width=\"" + strokeWidth + "\"\n              />");
         SVGContainer.svg(innerSvg);
-        SVGContainer.find("#symbol-bg:not(:first-child)").each(item => item.remove());
-        SVGContainer.find(":not(#symbol-bg)").each(item => item.center(DEFAULT_SYMBOL_WITH_BG_SIZE / 2, DEFAULT_SYMBOL_WITH_BG_SIZE / 2).fill("white")); // eslint-disable-next-line max-depth
+        SVGContainer.find('#symbol-bg:not(:first-child)').each(item => item.remove());
+        SVGContainer.find(':not(#symbol-bg)').each(item => item.center(DEFAULT_SYMBOL_WITH_BG_SIZE / 2, DEFAULT_SYMBOL_WITH_BG_SIZE / 2).fill('white')); // eslint-disable-next-line max-depth
 
         if (isParameterByAttribute(background == null ? void 0 : background.fillColor)) {
           var _background$fillColor, _SVGContainer$find$;
 
           const gradient = createSvgGradient(SVGContainer, background == null ? void 0 : (_background$fillColor = background.fillColor) == null ? void 0 : _background$fillColor.values);
-          (_SVGContainer$find$ = SVGContainer.find("#symbol-bg")[0]) == null ? void 0 : _SVGContainer$find$.fill(gradient);
+          (_SVGContainer$find$ = SVGContainer.find('#symbol-bg')[0]) == null ? void 0 : _SVGContainer$find$.fill(gradient);
+
+          if (isParameterByAttribute(background == null ? void 0 : background.strokeColor)) {
+            var _SVGContainer$find$2;
+
+            (_SVGContainer$find$2 = SVGContainer.find('#symbol-bg')[0]) == null ? void 0 : _SVGContainer$find$2.stroke({
+              color: gradient,
+              opacity: 0.28
+            });
+          }
         }
       } else {
         SVGContainer.svg(innerSvg);
       }
     } else {
       const fillColor = getParameterValue(figure == null ? void 0 : figure.fillColor);
-      SVGContainer.size(currentSize + "px", currentSize + "px").viewbox(viewBox.join(" "));
+      SVGContainer.size(currentSize + "px", currentSize + "px").viewbox(viewBox.join(' '));
       SVGContainer.svg(innerSvg);
-      SVGContainer.find("#symbol-figure").each(item => {
+      SVGContainer.find('#symbol-figure').each(item => {
         item.center(DEFAULT_SYMBOL_SIZE / 2, DEFAULT_SYMBOL_SIZE / 2).fill(fillColor || DEFAULT_SYMBOL_FILL_COLOR);
       });
     }
@@ -3294,13 +3313,13 @@ const manipulateSvgSymbol = (SVGContainer, symbol, svg, bg) => {
   const rootTransform = (_$exec2 = /<svg[^>]*transform="([^"]+)"/g.exec(symbolData)) == null ? void 0 : _$exec2[1];
 
   if (rootTransform) {
-    const transformParts = rootTransform.slice(0, -1).split("(");
+    const transformParts = rootTransform.slice(0, -1).split('(');
     SVGContainer.transform({
-      [transformParts[0]]: transformParts[1].split(",")
+      [transformParts[0]]: transformParts[1].split(',')
     });
   }
 
-  const rotatedAngle = SVGContainer.transform("rotate");
+  const rotatedAngle = SVGContainer.transform('rotate');
 
   if (rotatedAngle) {
     SVGContainer.rotate(-rotatedAngle, 0, 0);
@@ -6087,27 +6106,27 @@ const useSvgSymbol = (symbol, skipOffset) => {
       data,
       offset
     } = symbol;
-    const newValue = value instanceof Color.Color ? value.toString("rgba") : value;
+    const newValue = value instanceof Color.Color ? value.toString('rgba') : value;
 
     const newSymbol = _extends({}, JSON.parse(JSON.stringify(symbol)), {
       offset: skipOffset ? DEFAULT_SYMBOL_OFFSET : isSizeClassification(field) ? getOffsetParameterValue(offset) : offset
     });
 
-    if (field.indexOf(".") !== -1) {
+    if (field.indexOf('.') !== -1) {
       var _newSymbol$parts$;
 
-      const parts = field.split(".");
+      const parts = field.split('.');
 
       if ((_newSymbol$parts$ = newSymbol[parts[0]]) != null && _newSymbol$parts$[parts[1]]) {
         newSymbol[parts[0]][parts[1]] = newValue;
       } else {
         newSymbol[parts[0]] = _extends({}, newSymbol[parts[0]], {
           [parts[1]]: newValue
-        }, parts[0] === "background" ? {
+        }, parts[0] === 'background' ? {
           type: newSymbol.background.type,
-          id: "symbol-bg"
-        } : parts[0] === "figure" ? {
-          id: "symbol-figure"
+          id: 'symbol-bg'
+        } : parts[0] === 'figure' ? {
+          id: 'symbol-figure'
         } : {});
       }
     } else {
@@ -6488,7 +6507,11 @@ const LegendChildren = _ref => {
     if (!attribute) return null;
     const hiddenCondition = createHiddenCondition(attribute.name, attribute.type, getClassificationValue(paramValue.symbol, paramValue.title, new ClassificationCondition(paramValue.condition)));
     const legendText = getLegendText({
-      title: isRangeCondition(paramValue.condition) ? createValueTitleFromCondition(paramValue, attribute, formatValue, index) : getTitleFromCondition(paramValue.condition),
+      title: isRangeCondition(paramValue.condition) ? createValueTitleFromCondition(paramValue, attribute, formatValue, index) : getTitleFromCondition({
+        condition: paramValue.condition,
+        attribute,
+        formatValue
+      }),
       index,
       isDate: ((_getConditionAttribut = getConditionAttribute(attributes, paramValue.condition)) == null ? void 0 : _getConditionAttribut.type) === 'DateTime'
     });