@evergis/react 3.1.71 → 3.1.73

package/dist/components/Dashboard/containers/TaskContainer/components/StatusWaitingButton/styled.d.ts

@@ -1,5 +1,7 @@
 import { RemoteTaskStatus } from '@evergis/api';
+import { ThemeName } from '../../../../../../types';
 export declare const StyledButton: import('styled-components').StyledComponent<"button", any, import('@evergis/uilib-gl').IButtonProps & {
     status?: RemoteTaskStatus;
     statusColors?: Record<RemoteTaskStatus, string>;
+    themeName?: ThemeName;
 }, never>;

package/dist/components/Dashboard/hooks/useDashboardHeader.d.ts

@@ -5,6 +5,6 @@ export declare const useDashboardHeader: () => {
     title: import('react').ReactNode;
     tooltip: import("react/jsx-runtime").JSX.Element;
     description: import('react').ReactNode;
-    themeName: string;
+    themeName: import('../../..').ThemeName;
     renderElement: import('..').RenderElementFunction;
 };

package/dist/components/Dashboard/hooks/useGlobalContext.d.ts

@@ -2,7 +2,7 @@ import { i18n } from 'i18next';
 export declare const useGlobalContext: () => {
     t: i18n["t"];
     language: string;
-    themeName: string;
+    themeName: import('../../..').ThemeName;
     api: import('@evergis/api').Api;
     ewktGeometry: string;
 };

package/dist/contexts/GlobalContext/types.d.ts

@@ -1,10 +1,11 @@
 import { PropsWithChildren } from 'react';
 import { i18n } from 'i18next';
 import { Api } from '@evergis/api';
+import { ThemeName } from '../../types';
 export type GlobalContextProps = PropsWithChildren<{
     t?: i18n["t"];
     language?: string;
     ewktGeometry?: string;
-    themeName?: string;
+    themeName?: ThemeName;
     api?: Api;
 }>;

package/dist/index.js

@@ -24,9 +24,9 @@ require('mapbox-gl/dist/mapbox-gl.css');
 var react = require('swiper/react');
 var ReactMarkdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
+require('@xterm/xterm/css/xterm.css');
 var xterm = require('@xterm/xterm');
 var addonFit = require('@xterm/addon-fit');
-require('@xterm/xterm/css/xterm.css');
 
 const AddFeatureButton = ({ title, icon = "feature_add" /* , layerName, geometryType*/ }) => {
     // const [, handleAddFeature] = useFeatureCreator(layerName, geometryType);
@@ -3523,6 +3523,85 @@ const getGradientColors = (colorsCount) => {
         .getColors()
         .slice(0, colorsCount === undefined || colorsCount < GRADIENT_COLORS.length ? GRADIENT_COLORS.length : colorsCount);
 };
+/**
+ * Converts HSL hue value to RGB
+ * @param p - lower bound
+ * @param q - upper bound
+ * @param t - hue value
+ * @returns RGB component value (0-1)
+ */
+const hue2rgb = (p, q, t) => {
+    if (t < 0)
+        t += 1;
+    if (t > 1)
+        t -= 1;
+    if (t < 1 / 6)
+        return p + (q - p) * 6 * t;
+    if (t < 1 / 2)
+        return q;
+    if (t < 2 / 3)
+        return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+};
+/**
+ * Converts RGB component (0-1) to hex string
+ * @param value - RGB component value (0-1)
+ * @returns hex string (00-ff)
+ */
+const toHex = (value) => {
+    const hex = Math.round(value * 255).toString(16);
+    return hex.padStart(2, '0');
+};
+/**
+ * Adjusts color brightness
+ * @param color - hex color string (e.g., "#2196f3")
+ * @param lightnessAdjustment - lightness adjustment in HSL units (e.g., 5 or -5)
+ * @returns adjusted color in hex format
+ */
+const adjustColor = (color, lightnessAdjustment = 5) => {
+    // Convert hex to RGB
+    const hex = color.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16) / 255;
+    const g = parseInt(hex.substring(2, 4), 16) / 255;
+    const b = parseInt(hex.substring(4, 6), 16) / 255;
+    // Convert RGB to HSL
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                break;
+            case g:
+                h = ((b - r) / d + 2) / 6;
+                break;
+            case b:
+                h = ((r - g) / d + 4) / 6;
+                break;
+        }
+    }
+    const adjustedL = Math.max(0, Math.min(100, (l * 100) + lightnessAdjustment)) / 100;
+    // Convert HSL back to RGB
+    let rNew;
+    let gNew;
+    let bNew;
+    if (s === 0) {
+        rNew = gNew = bNew = adjustedL;
+    }
+    else {
+        const q = adjustedL < 0.5 ? adjustedL * (1 + s) : adjustedL + s - adjustedL * s;
+        const p = 2 * adjustedL - q;
+        rNew = hue2rgb(p, q, h + 1 / 3);
+        gNew = hue2rgb(p, q, h);
+        bNew = hue2rgb(p, q, h - 1 / 3);
+    }
+    return `#${toHex(rNew)}${toHex(gNew)}${toHex(bNew)}`;
+};
 
 const NO_CONTENT_VALUE = "—";
 exports.DateFormat = void 0;
@@ -6842,12 +6921,12 @@ const LogTerminal = ({ log }) => {
                 if (log.startsWith(previousLog)) {
                     // Log is accumulated - write only the new part
                     const newContent = log.substring(previousLog.length);
-                    xtermRef.current.write(`${newContent.replace(/\n/g, "\r\n")}\r\n`);
+                    xtermRef.current.write(newContent);
                 }
                 else {
                     // Log was replaced completely - clear and write all
                     xtermRef.current.clear();
-                    xtermRef.current.write(`${log.replace(/\n/g, "\r\n")}\r\n`);
+                    xtermRef.current.write(log);
                 }
                 previousLogRef.current = log;
             }
@@ -6856,7 +6935,7 @@ const LogTerminal = ({ log }) => {
             // JSON object (results) - always replace
             xtermRef.current.clear();
             const formatted = JSON.stringify(log, null, 2);
-            xtermRef.current.write(formatted.replace(/\n/g, "\r\n"));
+            xtermRef.current.write(formatted);
             previousLogRef.current = "";
         }
         else if (!log) {
@@ -6918,36 +6997,57 @@ const LogDialog = ({ isOpen, onClose, logs, status, statusColors }) => {
     const getStatusColor = React.useCallback((status) => {
         return statusColors?.[status] || STATUS_COLORS[status] || STATUS_COLORS[api.RemoteTaskStatus.Unknown];
     }, [statusColors]);
-    return (jsxRuntime.jsxs(uilibGl.Dialog, { isOpen: isOpen, onCloseRequest: onClose, modal: true, maxWidth: "800px", minWidth: "600px", minHeight: "600px", children: [jsxRuntime.jsx(uilibGl.DialogTitle, { children: jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(uilibGl.Flex, { alignItems: "center", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { marginRight: "1rem", children: t("taskLogs", { ns: "dashboard", defaultValue: "Логи выполнения задачи" }) }), jsxRuntime.jsx(StatusBadge, { text: getStatusTitle(status), bgColor: getStatusColor(status) })] }), jsxRuntime.jsx(uilibGl.IconButton, { kind: "close", onClick: onClose })] }) }), jsxRuntime.jsx(uilibGl.DialogContent, { children: jsxRuntime.jsx(uilibGl.Flex, { flexDirection: "column", height: "100%", marginBottom: "2rem", children: jsxRuntime.jsx(LogTerminal, { log: logs || t("taskLogsEmpty", { ns: "dashboard", defaultValue: "Логи отсутствуют" }) }) }) })] }));
+    return (jsxRuntime.jsxs(uilibGl.Dialog, { isOpen: isOpen, onCloseRequest: onClose, modal: true, maxWidth: "800px", minWidth: "600px", minHeight: "600px", children: [jsxRuntime.jsx(uilibGl.DialogTitle, { children: jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(uilibGl.Flex, { alignItems: "center", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { marginRight: "1rem", children: t("taskLogs", { ns: "dashboard", defaultValue: "Логи выполнения задачи" }) }), jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.darkTheme, children: jsxRuntime.jsx(StatusBadge, { text: getStatusTitle(status), bgColor: getStatusColor(status) }) })] }), jsxRuntime.jsx(uilibGl.IconButton, { kind: "close", onClick: onClose })] }) }), jsxRuntime.jsx(uilibGl.DialogContent, { children: jsxRuntime.jsx(uilibGl.Flex, { flexDirection: "column", height: "100%", marginBottom: "2rem", children: jsxRuntime.jsx(LogTerminal, { log: logs || t("taskLogsEmpty", { ns: "dashboard", defaultValue: "Логи отсутствуют" }) }) }) })] }));
 };
 
+exports.ThemeName = void 0;
+(function (ThemeName) {
+    ThemeName["Light"] = "light";
+    ThemeName["Dark"] = "dark";
+})(exports.ThemeName || (exports.ThemeName = {}));
+
+exports.TmsType = void 0;
+(function (TmsType) {
+    TmsType["WMS"] = "WMS";
+    TmsType["TMS"] = "TMS";
+    TmsType["ArcGIS"] = "ArcGIS";
+})(exports.TmsType || (exports.TmsType = {}));
+exports.EditGeometryType = void 0;
+(function (EditGeometryType) {
+    EditGeometryType["Raster"] = "raster";
+})(exports.EditGeometryType || (exports.EditGeometryType = {}));
+
 const StyledButton = styled(uilibGl.FlatButton) `
   display: flex;
   align-items: center;
-  
-  ${({ status = api.RemoteTaskStatus.Unknown, statusColors }) => !!statusColors?.[status] && styled.css `
+
+  ${({ status = api.RemoteTaskStatus.Unknown, statusColors, themeName }) => !!statusColors?.[status] && styled.css `
     transition: background-color ${uilibGl.transition.toggle};
     background-color: ${statusColors[status]};
-    
+
     :hover {
-      background-color: ${statusColors[status]};
+      background-color: ${adjustColor(statusColors[status], themeName === exports.ThemeName.Dark ? -5 : 5)};
+    }
+    
+    :active {
+      background-color: ${adjustColor(statusColors[status], themeName === exports.ThemeName.Dark ? -10 : 10)};
     }
   `}
 `;
 
 const StatusWaitingButton = ({ title, icon = "play", status, statusColors, isWaiting, isDisabled, onClick }) => {
-    const { t } = useGlobalContext();
+    const { t, themeName } = useGlobalContext();
     const renderTitle = React.useMemo(() => status === api.RemoteTaskStatus.Process
         ? t("", { ns: "dashboard", defaultValue: "Остановить" })
         : status === api.RemoteTaskStatus.Unknown ? title : STATUS_TITLES[status], [status, t, title]);
     const renderIcon = React.useMemo(() => {
-        const iconComponent = isWaiting ? (jsxRuntime.jsx(uilibGl.CircularProgress, { diameter: 1, theme: uilibGl.darkTheme }))
+        const iconComponent = isWaiting ? (jsxRuntime.jsx(uilibGl.CircularProgress, { diameter: 1, mono: true }))
             : status !== api.RemoteTaskStatus.Unknown
                 ? jsxRuntime.jsx(uilibGl.Icon, { kind: STATUS_ICONS[status] })
                 : jsxRuntime.jsx(uilibGl.Icon, { kind: icon });
-        return (jsxRuntime.jsx(uilibGl.FlexSpan, { marginRight: renderTitle ? "0.5rem" : 0, children: iconComponent }));
+        return (jsxRuntime.jsx(uilibGl.Flex, { alignItems: "center", marginRight: renderTitle ? "0.5rem" : 0, children: iconComponent }));
     }, [icon, isWaiting, renderTitle, status]);
-    return (jsxRuntime.jsxs(StyledButton, { status: status, statusColors: statusColors, disabled: isDisabled, onClick: onClick, children: [renderIcon, renderTitle] }));
+    return (jsxRuntime.jsx(uilibGl.ThemeProvider, { theme: uilibGl.darkTheme, children: jsxRuntime.jsxs(StyledButton, { status: status, statusColors: statusColors, disabled: isDisabled, themeName: themeName, onClick: onClick, children: [renderIcon, renderTitle] }) }));
 };
 
 const TaskContainer = React.memo(({ type, elementConfig, renderElement }) => {
@@ -7102,27 +7202,10 @@ const PageTitle = styled(uilibGl.H2) `
   font-family: "Nunito Sans", serif;
 `;
 
-exports.ThemeName = void 0;
-(function (ThemeName) {
-    ThemeName["Light"] = "light";
-    ThemeName["Dark"] = "dark";
-})(exports.ThemeName || (exports.ThemeName = {}));
-
-exports.TmsType = void 0;
-(function (TmsType) {
-    TmsType["WMS"] = "WMS";
-    TmsType["TMS"] = "TMS";
-    TmsType["ArcGIS"] = "ArcGIS";
-})(exports.TmsType || (exports.TmsType = {}));
-exports.EditGeometryType = void 0;
-(function (EditGeometryType) {
-    EditGeometryType["Raster"] = "raster";
-})(exports.EditGeometryType || (exports.EditGeometryType = {}));
-
 const DashboardDefaultHeader = React.memo(() => {
     const { components: { ProjectCatalogMenu, ProjectPanelMenu, ProjectPagesMenu }, } = useWidgetContext();
     const { pageId, image, icon, tooltip, themeName } = useDashboardHeader();
-    return (jsxRuntime.jsxs(DefaultHeaderContainer, { image: image, isDark: themeName === exports.ThemeName.Dark, children: [!pageId && jsxRuntime.jsx(uilibGl.LinearProgress, {}), jsxRuntime.jsxs(uilibGl.Flex, { column: true, gap: "1rem", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(TopContainer, { children: [jsxRuntime.jsx(LogoContainer, { children: icon }), jsxRuntime.jsxs(TopContainerButtons, { children: [jsxRuntime.jsx(ProjectCatalogMenu, {}), jsxRuntime.jsx(ProjectPanelMenu, {})] })] }) }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.Flex, { column: true, gap: "0.25rem", children: jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(uilibGl.Flex, { alignItems: "center", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { flexGrow: 1, children: jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, content: tooltip, children: ref => (jsxRuntime.jsx(PageTitle, { ref: ref, children: jsxRuntime.jsx(ProjectPagesMenu, {}) })) }) }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(Pagination, {}) })] }) }) }) })] })] }));
+    return (jsxRuntime.jsxs(DefaultHeaderContainer, { image: getResourceUrl(image), isDark: themeName === exports.ThemeName.Dark, children: [!pageId && jsxRuntime.jsx(uilibGl.LinearProgress, {}), jsxRuntime.jsxs(uilibGl.Flex, { column: true, gap: "1rem", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(TopContainer, { children: [jsxRuntime.jsx(LogoContainer, { children: icon }), jsxRuntime.jsxs(TopContainerButtons, { children: [jsxRuntime.jsx(ProjectCatalogMenu, {}), jsxRuntime.jsx(ProjectPanelMenu, {})] })] }) }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(uilibGl.Flex, { column: true, gap: "0.25rem", children: jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsxs(uilibGl.Flex, { alignItems: "center", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { flexGrow: 1, children: jsxRuntime.jsx(uilibGl.Tooltip, { arrow: true, content: tooltip, children: ref => (jsxRuntime.jsx(PageTitle, { ref: ref, children: jsxRuntime.jsx(ProjectPagesMenu, {}) })) }) }), jsxRuntime.jsx(uilibGl.FlexSpan, { children: jsxRuntime.jsx(Pagination, {}) })] }) }) }) })] })] }));
 });
 
 const HeaderFrontView = styled(uilibGl.Flex) `
@@ -11170,6 +11253,7 @@ exports.TwoColumnContainer = TwoColumnContainer;
 exports.UploadContainer = UploadContainer;
 exports.addDataSource = addDataSource;
 exports.addDataSources = addDataSources;
+exports.adjustColor = adjustColor;
 exports.applyFiltersToCondition = applyFiltersToCondition;
 exports.applyQueryFilters = applyQueryFilters;
 exports.applyVarsToCondition = applyVarsToCondition;