wenay-react2 1.0.20 → 1.0.21

package/lib/common/src/logs/miniLogs.js

@@ -1,42 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { timeLocalToStr_hhmmss } from "wenay-common2";
 import { AgGridReact } from "ag-grid-react";
-import { useRef } from "react";
+const columns = [
+    {
+        field: "time",
+        sort: "desc",
+        width: 50,
+        valueFormatter: (e) => e.value ? timeLocalToStr_hhmmss(e.value) : e.value
+    },
+    {
+        field: "id",
+        width: 20,
+    },
+    {
+        field: "var",
+        width: 50,
+    },
+    {
+        field: "txt",
+        wrapText: true,
+        autoHeight: true,
+        width: 350
+    },
+    {
+        field: "address",
+        width: 150,
+    },
+];
 export function MiniLogs({ data, onClick }) {
-    const apiGrid = useRef(null);
-    const columns = [
-        {
-            field: "time",
-            sort: "desc",
-            width: 50,
-            valueFormatter: (e) => e.value ? timeLocalToStr_hhmmss(e.value) : e.value
-        },
-        {
-            field: "id",
-            width: 20,
-        },
-        {
-            field: "var",
-            width: 50,
-        },
-        {
-            field: "txt",
-            wrapText: true,
-            autoHeight: true,
-            width: 350
-        },
-        {
-            field: "address",
-            width: 150,
-        },
-    ];
-    return _jsx("div", { className: "maxSize", children: _jsx(AgGridReact
-        // className = "ag-theme-alpine-dark ag-theme-alpine2" // ag-theme-alpine-dark3
-        , { 
-            // className = "ag-theme-alpine-dark ag-theme-alpine2" // ag-theme-alpine-dark3
-            suppressCellFocus: true, onGridReady: (a) => {
-                apiGrid.current = a; //as GridReadyEvent<tColum>
-                apiGrid.current.api.sizeColumnsToFit();
+    return _jsx("div", { className: "maxSize", children: _jsx(AgGridReact, { suppressCellFocus: true, onGridReady: (a) => {
+                a.api.sizeColumnsToFit();
             }, defaultColDef: {
                 headerClass: () => ("gridTable-header"),
                 resizable: true,
@@ -45,7 +38,6 @@ export function MiniLogs({ data, onClick }) {
                 filter: true,
                 wrapText: true,
             }, headerHeight: 30, rowHeight: 26, autoSizePadding: 1, rowData: data, columnDefs: columns, onCellMouseDown: (e) => {
-                // @ts-ignore
                 onClick?.(e);
             } }) });
 }

package/lib/common/src/menu/menu.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 /*******************************************************
- * Типы данных для меню
+ * Menu data types
  *******************************************************/
 export type tMenuReactStrictly<T = any> = {
     name: string | ((status?: T) => string);
@@ -15,7 +15,7 @@ export type tMenuReactStrictly<T = any> = {
 };
 export type tMenuReact<T = any> = tMenuReactStrictly<T> | false | null | undefined;
 /*******************************************************
- * Вспомогательный тип
+ * Helper type
  *******************************************************/
 type tCounters = {
     ok?: number;
@@ -23,13 +23,13 @@ type tCounters = {
     count?: number;
 };
 /*******************************************************
- * Отображает счётчик/прогресс (анимация, кол-во ok/error)
+ * Displays counter/progress with animation and ok/error counts
  *******************************************************/
 declare function TimeNum({ data }: {
     data: tCounters;
 }): ReactElement;
 /*******************************************************
- * Основной элемент меню (пункт с onClick, счётчиками и т.д.)
+ * Main menu element with onClick and counters
  *******************************************************/
 declare function MenuElement({ data: item, toLeft, className, update, }: {
     data: Pick<tMenuReactStrictly, "onClick" | "active" | "name" | "getStatus">;
@@ -38,22 +38,22 @@ declare function MenuElement({ data: item, toLeft, className, update, }: {
     update: () => void;
 }): ReactElement;
 /*******************************************************
- * Компонент MenuBase отвечает за отрисовку всплывающего меню с поддержкой
- * вложенных подменю и управления их состоянием.
+ * MenuBase renders the popup menu with support for
+ * nested submenus and their state management.
  *
- * @param {Object} props - Пропсы компонента.
- * @param {Object} [props.coordinate] - Координаты и параметры отображения меню.
- * @param {number} props.coordinate.x - Координата X для размещения меню.
- * @param {number} props.coordinate.y - Координата Y для размещения меню.
- * @param {boolean} [props.coordinate.toLeft=false] - Указывает, должно ли меню быть смещено влево.
- * @param {number} [props.coordinate.left=0] - Дополнительное смещение влево, если меню отображается с вложенными элементами.
- * @param {tMenuReactStrictly[]} props.data - Массив объектов, описывающих элементы меню.
- * @param {number} [props.zIndex] - Z-index меню для управления видимостью при перекрытии.
- * @param {Function} [props.menu] - Функция, которая генерирует кастомный React элемент для отображения всего меню.
- * @param {Function} [props.menuElement] - Функция для генерации кастомного React элемента для отображения отдельного элемента меню.
- * @param {Function} [props.className] - Функция для задания CSS-классов для элементов меню.
+ * @param {Object} props - Component props.
+ * @param {Object} [props.coordinate] - Menu coordinates and display parameters.
+ * @param {number} props.coordinate.x - X coordinate for menu placement.
+ * @param {number} props.coordinate.y - Y coordinate for menu placement.
+ * @param {boolean} [props.coordinate.toLeft=false] - Whether the menu should be shifted left.
+ * @param {number} [props.coordinate.left=0] - Additional left offset when the menu has nested items.
+ * @param {tMenuReactStrictly[]} props.data - Array of objects describing menu items.
+ * @param {number} [props.zIndex] - Menu z-index for overlap visibility.
+ * @param {Function} [props.menu] - Function that generates a custom React element for the whole menu.
+ * @param {Function} [props.menuElement] - Function that generates a custom React element for one menu item.
+ * @param {Function} [props.className] - Function for assigning CSS classes to menu items.
  *
- * @returns {ReactElement} Визуальный элемент меню.
+ * @returns {ReactElement} Visual menu element.
  */
 type MenuBaseProps = {
     menu?: (arr: tMenuReact[]) => ReactElement;

package/lib/common/src/menu/menu.js

@@ -2,12 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { PromiseArrayListen, sleepAsync } from "wenay-common2";
 /*******************************************************
- * Отображает счётчик/прогресс (анимация, кол-во ok/error)
+ * Displays counter/progress with animation and ok/error counts
  *******************************************************/
 function TimeNum({ data }) {
-    const refCounter = useRef(0);
-    const [count, setCount] = useState(refCounter.current);
-    refCounter.current = count;
+    const [count, setCount] = useState(0);
     const formatLabel = () => {
         if (!data.ok && !data.error)
             return count;
@@ -29,13 +27,13 @@ function TimeNum({ data }) {
         }, children: formatLabel() }));
 }
 /*******************************************************
- * Основной элемент меню (пункт с onClick, счётчиками и т.д.)
+ * Main menu element with onClick and counters
  *******************************************************/
 function MenuElement({ data: item, toLeft, className, update, }) {
     const unsubOk = useRef(null);
     const unsubErr = useRef(null);
     useEffect(() => {
-        // При размонтировании отписываемся
+        // Unsubscribe on unmount
         return () => {
             unsubOk.current?.();
             unsubErr.current?.();
@@ -53,24 +51,37 @@ function MenuElement({ data: item, toLeft, className, update, }) {
                 update();
                 return;
             }
-            // Если это массив "задач" (промисов или функций)
+            // If this is an array of tasks, promises, or functions
             if (Array.isArray(result)) {
                 const tasks = result.filter(Boolean);
-                const pa = PromiseArrayListen(tasks); // Допустим, внешняя функция
+                const pa = PromiseArrayListen(tasks); // External helper function
                 setProgress({});
                 unsubOk.current?.();
                 unsubErr.current?.();
-                unsubOk.current = pa.listenOk((data, i, countOk, countError, count) => setProgress({ ok: countOk, error: countError, count }));
-                unsubErr.current = pa.listenError((error, i, countOk, countError, count) => setProgress({ ok: countOk, error: countError, count }));
+                // clear progress when all tasks settle, same as the single-promise path;
+                // previously the counter (and its 30ms interval) lived until unmount
+                const onTick = async (countOk, countError, count) => {
+                    setProgress({ ok: countOk, error: countError, count });
+                    if (countOk + countError >= count) {
+                        unsubOk.current?.();
+                        unsubErr.current?.();
+                        unsubOk.current = null;
+                        unsubErr.current = null;
+                        await sleepAsync(500);
+                        setProgress(null);
+                    }
+                };
+                unsubOk.current = pa.listenOk((data, i, countOk, countError, count) => onTick(countOk, countError, count));
+                unsubErr.current = pa.listenError((error, i, countOk, countError, count) => onTick(countOk, countError, count));
             }
-            // Если это один промис
+            // If this is a single promise
             else if (result instanceof Promise) {
                 setProgress({});
                 result
                     .then(async (val) => {
                     if (Array.isArray(val) && val.length) {
-                        // Если вернулся массив из Promise.allSettled
-                        // Считаем кол-во ok/error
+                        // If an array from Promise.allSettled was returned
+                        // Count ok/error results
                         if (val[0]?.status === "fulfilled" || val[0]?.status === "rejected") {
                             const t = { ok: 0, error: 0 };
                             val.forEach((res) => {
@@ -105,15 +116,18 @@ const MenuItemWrapper = ({ item, index, update, className, isLeftAligned, leftPo
     const [onFocusMenu, setOnFocusMenu] = useState([]);
     useEffect(() => {
         if (item.status && item.next) {
+            let alive = true; // guard: do not set state after unmount or item change
             const result = item.next();
             if (result instanceof Promise) {
                 result.then((val) => {
-                    setChildMenu(val.filter(Boolean));
+                    if (alive)
+                        setChildMenu(val.filter(Boolean));
                 });
             }
             else {
                 setChildMenu(result.filter(Boolean));
             }
+            return () => { alive = false; };
         }
         else {
             setChildMenu([]);
@@ -121,15 +135,18 @@ const MenuItemWrapper = ({ item, index, update, className, isLeftAligned, leftPo
     }, [item.status, item.next]);
     useEffect(() => {
         if (item.status && item.func) {
+            let alive = true;
             const result = item.func();
             if (result instanceof Promise) {
                 result.then((val) => {
-                    setAsyncFuncElement(val);
+                    if (alive)
+                        setAsyncFuncElement(val);
                 });
             }
             else {
                 setAsyncFuncElement(result);
             }
+            return () => { alive = false; };
         }
         else {
             setAsyncFuncElement(null);
@@ -137,15 +154,18 @@ const MenuItemWrapper = ({ item, index, update, className, isLeftAligned, leftPo
     }, [item.status, item.func]);
     useEffect(() => {
         if (item.status && item.onFocus) {
+            let alive = true;
             const result = item.onFocus();
             if (result instanceof Promise) {
                 result.then((val) => {
-                    setOnFocusMenu(val.filter(Boolean));
+                    if (alive)
+                        setOnFocusMenu(val.filter(Boolean));
                 });
             }
             else {
                 setOnFocusMenu(result.filter(Boolean));
             }
+            return () => { alive = false; };
         }
         else {
             setOnFocusMenu([]);
@@ -187,21 +207,28 @@ export function MenuBase({ coordinate = { x: 0, y: 0, toLeft: false, left: 0 },
     const [, forceUpdate] = useState(false);
     const update = () => forceUpdate((p) => !p);
     const refMenu = useRef(null);
-    const dataMemo = useMemo(() => data.filter((e) => e), [data, data.length]);
+    const dataMemo = useMemo(() => data.filter(Boolean), [data, data.length]);
     const [top, setTop] = useState(coordinate.y);
     const [leftPos, setLeftPos] = useState(coordinate.x);
     const [menuWidth, setMenuWidth] = useState(0);
     const [isLeftAligned, setIsLeftAligned] = useState(!!coordinate.toLeft);
     const [xOffset, setXOffset] = useState(0);
+    // Mirror of applied top: vertical snap is recalculated from the base coordinate.y,
+    // not from prev; the setTop(prev + ...) delta formula accumulated between runs and drifted.
+    const appliedTop = useRef(top);
+    appliedTop.current = top;
     useLayoutEffect(() => {
         if (!refMenu.current)
             return;
         const rect = refMenu.current.getBoundingClientRect();
         const w = window.innerWidth, h = window.innerHeight;
-        if (h - rect.bottom < 8)
-            setTop((prev) => prev + (h - rect.bottom));
+        // Vertical: same bottom snap to viewport edge, but idempotently from the base.
+        const baseBottom = rect.bottom - (appliedTop.current - coordinate.y);
+        setTop(h - baseBottom < 8 ? coordinate.y + (h - baseBottom) : coordinate.y);
         setLeftPos(rect.x);
         setMenuWidth(rect.width);
+        // Horizontal: original sticky logic; reflect once without rollback,
+        // it is self-stabilizing and does not accumulate.
         if (!coordinate.toLeft && w - rect.right < 8 && rect.width < (coordinate.left ?? 0)) {
             setXOffset(rect.x - (coordinate.left ?? 0));
             setIsLeftAligned(true);
@@ -213,10 +240,7 @@ export function MenuBase({ coordinate = { x: 0, y: 0, toLeft: false, left: 0 },
     const alignStyle = isLeftAligned
         ? { display: "flex", flexDirection: "column-reverse", alignItems: "flex-end" }
         : {};
-    return (_jsx("div", { ref: (el) => {
-            if (el)
-                refMenu.current = el;
-        }, style: {
+    return (_jsx("div", { ref: refMenu, style: {
             position: "absolute",
             zIndex,
             paddingLeft: 3,
@@ -225,6 +249,6 @@ export function MenuBase({ coordinate = { x: 0, y: 0, toLeft: false, left: 0 },
             ...alignStyle,
         }, children: menu
             ? menu(dataMemo)
-            : dataMemo.map((item, i, arr) => (_jsx(MenuItemWrapper, { item: item, index: i, update: update, className: className, isLeftAligned: isLeftAligned, leftPos: leftPos, menuElement: menuElement, fullArray: dataMemo }, i))) }));
+            : dataMemo.map((item, i, arr) => (_jsx(MenuItemWrapper, { item: item, index: i, update: update, className: className, isLeftAligned: isLeftAligned, leftPos: leftPos, menuElement: menuElement, fullArray: dataMemo }, typeof item.name === "string" ? item.name : i))) }));
 }
 export { TimeNum, MenuElement };

package/lib/common/src/menu/menuMouse.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { GetMenuR } from "./menuR";
 import { MenuBase } from "./menu";
 function GetMouseMenuApi(data) {
@@ -21,7 +22,9 @@ function GetMouseMenuApi(data) {
     }
     function ReactMouse(agr) {
         const datum = menuMouse.value; //staticGetAdd(menuMouse.name, menuMouse.value
-        return MenuR({ ...(agr ?? {}), other: agr.other ? agr.other : other, statusOn: datum.status, onConsume: () => { map.clear(); } });
+        // JSX instead of a direct call: MenuR's hooks must live in its own fiber,
+        // a direct call ties them to whichever component renders ReactMouse
+        return _jsx(MenuR, { ...agr, other: agr.other ?? other, statusOn: datum.status, onConsume: () => { map.clear(); } });
     }
     return {
         bb, get map() { return map; }, get menuMouse() { return menuMouse; }, ReactMouse, ReactMenu: MenuBase

package/lib/common/src/menu/menuR.d.ts

@@ -2,8 +2,8 @@ import React from "react";
 import { tMenuReact } from "./menu";
 export declare function GetMenuR(): {
     /**
-     * Управление глобальной переменной `bb`, предотвращающей множественное
-     * открытие меню.
+     * Manage the global `bb` variable that prevents opening multiple
+     * menus.
      */
     bb(b?: boolean): boolean | undefined;
     MenuR: ({ children, other, statusOn, onUnClick, onConsume, zIndex, className }: {

package/lib/common/src/menu/menuR.js

@@ -2,30 +2,30 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef } from "react";
 import { MenuBase } from "./menu";
 import { DivOutsideClick } from "../hooks/useOutside";
-// Функция-обёртка для создания компонента MenuR и управления глобальной переменной `bb`
+// Wrapper function for creating MenuR and managing the global `bb` variable.
 export function GetMenuR() {
-    let bb = false; // Глобальная переменная, предотвращающая множественное открытие меню (флаг активности)
-    // Основной компонент MenuR
+    let bb = false; // Global activity flag that prevents opening multiple menus.
+    // Main MenuR component
     function MenuR({ children, other = () => [], statusOn = true, onUnClick, onConsume, zIndex, className }) {
-        const data = { x: 0, y: 0 }; // Текущая позиция элемента, где происходит взаимодействие
+        const data = { x: 0, y: 0 }; // Current position of the interaction element
         const [show, setShow] = React.useState({ status: false });
         useEffect(() => {
             return () => {
-                bb = false; // Сбрасываем флаг активности при размонтировании компонента
+                bb = false; // Reset activity flag when the component unmounts
             };
         }, []);
-        const timeEvent = useRef(Date.now()); // Временная метка для отслеживания двойных кликов
-        let x = 0, y = 0; // Текущие координаты касания
-        const touchTime = useRef(null); // Время начала касания
+        const timeEvent = useRef(Date.now()); // Timestamp for tracking double clicks
+        const touchXY = useRef({ x: 0, y: 0 }); // Current touch coordinates (ref: survives rerenders mid-gesture)
+        const touchTime = useRef(null); // Touch start time
         return (_jsxs("div", { className: "maxSize", style: { position: "relative" }, 
-            // Для отключения стандартного контекстного меню
+            // Disable the native context menu
             onContextMenu: e => {
                 if (statusOn) {
                     e.preventDefault();
                     e.stopPropagation();
                 }
             }, 
-            // Определение позиции взаимодействия для текущего элемента (например, контейнера)
+            // Determine the interaction position for the current element
             ref: (e) => {
                 if (e) {
                     const r = e.getBoundingClientRect();
@@ -33,33 +33,33 @@ export function GetMenuR() {
                     data.y = r.y;
                 }
             }, 
-            // Запоминаем начальные координаты касания
+            // Store initial touch coordinates
             onTouchStart: (e) => {
-                if (x == 0)
-                    x = e.touches[0].screenX;
-                if (y == 0)
-                    y = e.touches[0].screenY;
+                if (touchXY.current.x == 0)
+                    touchXY.current.x = e.touches[0].screenX;
+                if (touchXY.current.y == 0)
+                    touchXY.current.y = e.touches[0].screenY;
                 touchTime.current = Date.now();
             }, 
-            // Проверка на значительное смещение (чтобы не показывать меню при скролле)
+            // Check for significant movement to avoid showing the menu while scrolling
             onTouchMove: (e) => {
                 let x2 = e.touches[0].screenX;
                 let y2 = e.touches[0].screenY;
                 let pX = e.touches[0].pageX;
                 let pY = e.touches[0].pageY;
-                if ((Math.abs(x2 - x) / pX > 0.05) || (Math.abs(y2 - y) / pY > 0.05)) {
-                    touchTime.current = null; // Если смещение слишком большое, отключаем показ меню
+                if ((Math.abs(x2 - touchXY.current.x) / pX > 0.05) || (Math.abs(y2 - touchXY.current.y) / pY > 0.05)) {
+                    touchTime.current = null; // If movement is too large, disable menu display
                 }
             }, 
-            // Определяем долгое касание для вызова контекстного меню
+            // Detect long touch for opening the context menu
             onTouchEnd: (e) => {
                 if (statusOn) {
                     if (touchTime.current && Date.now() - touchTime.current > 300) {
-                        // Если прошло больше 300 мс — считываем как долгое нажатие
+                        // More than 300 ms counts as a long press
                         touchTime.current = null;
-                        x = y = 0;
+                        touchXY.current.x = touchXY.current.y = 0;
                         if (bb)
-                            return; // Если меню уже активно, выходим
+                            return; // Menu is already active
                         bb = true;
                         const menu = other().filter(el => el);
                         onConsume?.();
@@ -74,30 +74,30 @@ export function GetMenuR() {
                     }
                 }
             }, 
-            // Отслеживаем двойной клик
+            // Track double click
             onDoubleClick: (event) => {
                 timeEvent.current = Date.now();
             }, 
-            // Обрабатываем клик правой кнопкой мыши или двойной клик
+            // Handle right mouse click or double click
             onMouseUp: (event) => {
                 if (statusOn) {
                     if (event.button == 2 || Date.now() - timeEvent.current < 300) {
                         if (bb)
-                            return; // Если меню уже активно, ничего не делаем
+                            return; // Menu is already active
                         bb = true;
                         const menu = other().filter(el => el);
                         onConsume?.();
                         setShow({ status: true, menu, coordinate: { x: event.clientX - data.x, y: event.clientY - data.y } });
                     }
                 }
-            }, children: [children /* Дочерний элемент, внутри которого отслеживаются события */, show.status && statusOn && (
-                // Показываем контекстное меню
+            }, children: [children /* Child element whose events are tracked */, show.status && statusOn && (
+                // Show the context menu
                 _jsx(DivOutsideClick, { outsideClick: () => {
-                        onUnClick?.(false); // Вызов обработчика при закрытии меню
                         if (!bb)
-                            return;
-                        bb = false; // Меню больше не активно
-                        setShow({ status: false }); // Скрываем меню
+                            return; // Menu is already inactive; do not call close handler
+                        bb = false; // Menu is no longer active
+                        onUnClick?.(false); // Call close handler
+                        setShow({ status: false }); // Hide the menu
                     }, children: _jsx(MenuBase, { className: className, data: [
                             ...(show.plusMenu ?? []),
                             ...(show.menu ?? [])
@@ -105,8 +105,8 @@ export function GetMenuR() {
     }
     return {
         /**
-         * Управление глобальной переменной `bb`, предотвращающей множественное
-         * открытие меню.
+         * Manage the global `bb` variable that prevents opening multiple
+         * menus.
          */
         bb(b) {
             if (b != undefined) {
@@ -115,6 +115,6 @@ export function GetMenuR() {
             else
                 return bb;
         },
-        MenuR // Возвращаем созданный компонент
+        MenuR // Return the created component
     };
 }

package/lib/common/src/myChart/1/myChart.d.ts

@@ -1,12 +1,12 @@
 /**
- * Точка на графике: время (time) и цена (price).
+ * Chart point: time and price.
  */
 export interface IChartPoint {
     time: number;
     price: number;
 }
 /**
- * Настройки канваса.
+ * Canvas settings.
  */
 export interface IChartConfig {
     container: HTMLElement;
@@ -17,8 +17,8 @@ export interface IChartConfig {
     showPriceAxis?: boolean;
 }
 /**
- * Интерфейс объекта, который возвращает createChartCanvas:
- * методы управления зумом, прокруткой и т.д.
+ * Interface returned by createChartCanvas:
+ * methods for zoom, scrolling, etc.
  */
 export interface IChartCanvas {
     appendData(points: IChartPoint | IChartPoint[]): void;
@@ -35,6 +35,6 @@ export interface IChartCanvas {
     destroy(): void;
 }
 /**
- * Создаём функциональный канвас с возможностью зума колёсиком.
+ * Creates a functional canvas with wheel zoom support.
  */
 export declare function createChartCanvas(config: IChartConfig): IChartCanvas;