wenay-react2 1.0.19 → 1.0.21

package/lib/common/updateBy.js

@@ -1,7 +1,16 @@
-import { useLayoutEffect, useSyncExternalStore } from "react";
-import { waitRun } from "wenay-common2";
+import { useCallback, useLayoutEffect, useSyncExternalStore } from "react";
+import { UseListen, waitRun } from "wenay-common2";
 export const map3 = new WeakMap();
 export const mapWait = new Map();
+const updateListens = new WeakMap();
+function getUpdateListen(obj) {
+    let listen = updateListens.get(obj);
+    if (!listen) {
+        listen = UseListen();
+        updateListens.set(obj, listen);
+    }
+    return listen;
+}
 function getObserverState(obj) {
     let state = map3.get(obj);
     if (!state) {
@@ -10,68 +19,64 @@ function getObserverState(obj) {
     }
     return state;
 }
+// reverse/lastOnly действуют только на React-подписчиков (useUpdateBy);
+// императивные on-подписчики вызываются всегда все, в порядке подписки
 function triggerUpdate(obj, reverse = false, lastOnly = false) {
-    const state = map3.get(obj);
-    if (!state || state.listeners.size === 0)
+    const listen = updateListens.get(obj);
+    let state = map3.get(obj);
+    if ((!state || state.listeners.size === 0) && !listen?.[1].count())
         return;
+    state ??= getObserverState(obj);
     state.version += 1;
     let listenersArray = Array.from(state.listeners);
     if (lastOnly) {
         const last = listenersArray.at(-1);
         if (last)
             last(obj);
+        listen?.[0](obj);
         return;
     }
     if (reverse) {
         listenersArray.reverse();
     }
     listenersArray.forEach(listener => listener(obj));
+    listen?.[0](obj);
 }
-export function renderBy(a, ms) {
+function schedule(a, ms, reverse = false, lastOnly = false) {
     if (ms) {
         (mapWait.get(a) || mapWait.set(a, waitRun()).get(a))
             .refreshAsync(ms, () => {
             mapWait.delete(a);
-            triggerUpdate(a);
+            triggerUpdate(a, reverse, lastOnly);
         });
     }
     else
-        triggerUpdate(a);
+        triggerUpdate(a, reverse, lastOnly);
+}
+export function renderBy(a, ms) {
+    schedule(a, ms);
 }
 export function renderByRevers(a, ms, reverse = true) {
-    if (ms) {
-        (mapWait.get(a) || mapWait.set(a, waitRun()).get(a))
-            .refreshAsync(ms, () => {
-            mapWait.delete(a);
-            triggerUpdate(a, reverse);
-        });
-    }
-    else
-        triggerUpdate(a, reverse);
+    schedule(a, ms, reverse);
 }
 export function renderByLast(a, ms) {
-    if (ms) {
-        (mapWait.get(a) || mapWait.set(a, waitRun()).get(a))
-            .refreshAsync(ms, () => {
-            mapWait.delete(a);
-            triggerUpdate(a, false, true);
-        });
-    }
-    else
-        triggerUpdate(a, false, true);
+    schedule(a, ms, false, true);
 }
 export function useUpdateBy(a, f) {
-    useSyncExternalStore((listener) => {
+    // стабильный subscribe: без useCallback React переподписывается на каждый рендер,
+    // а удаление state из map3 при этом сбрасывало бы version → лишний форс-ререндер
+    const subscribe = useCallback((listener) => {
         if (f)
             return () => { };
         const state = getObserverState(a);
         state.listeners.add(listener);
         return () => {
             state.listeners.delete(listener);
-            if (state.listeners.size === 0)
-                map3.delete(a);
         };
-    }, () => (f ? 0 : getObserverState(a).version));
+    }, [a, f]);
+    useSyncExternalStore(subscribe, 
+    // getSnapshot must be pure: only read the version, subscribe creates the state
+    () => (f ? 0 : (map3.get(a)?.version ?? 0)));
     useLayoutEffect(() => {
         if (!f)
             return;
@@ -79,111 +84,41 @@ export function useUpdateBy(a, f) {
         state.listeners.add(f);
         return () => {
             state.listeners.delete(f);
-            if (state.listeners.size === 0)
-                map3.delete(a);
         };
     }, [a, f]);
 }
 export function updateBy(a, f) {
     useUpdateBy(a, f);
 }
-// import {useLayoutEffect, useState} from "react";
-// import {waitRun} from "wenay-common2";
-//
-// type tFunc2 = Map<object, (a?: any) => void>
-// export const map3 = new WeakMap<object, tFunc2>();
-// export const mapWait = new Map<object, ReturnType<typeof waitRun>>();
-//
-//
-// export function renderBy(a: object, ms?: number) {
-//     const t = () => map3.get(a)?.forEach(e=>e(a))
-//     if (ms) {
-//         (mapWait.get(a) || mapWait.set(a, waitRun()).get(a)!)
-//             .refreshAsync(ms, ()=> {
-//                 mapWait.delete(a)
-//                 t()})
-//     }
-//     else t()
-// }
-//
-// export function renderByRevers(a: object, ms?: number, reverse = true) {
-//     const ar: ((a?: any) => void)[] = []
-//     map3.get(a)?.forEach(e=>ar.push(e))
-//     const t = reverse ? () => ar.reverse().forEach(e=>e(a))
-//         : () => ar.forEach(e=>e(a))
-//     if (ms) {
-//         (mapWait.get(a) || mapWait.set(a, waitRun()).get(a)!)
-//             .refreshAsync(ms, ()=> {
-//                 mapWait.delete(a)
-//                 t()})
-//     }
-//     else t()
-// }
-//
-// export function renderByLast(a: object, ms?: number) {
-//     const ar: ((a?: any) => void)[] = []
-//     map3.get(a)?.forEach(e=>ar.push(e))
-//     const t =  () => ar.at(-1)?.()
-//     if (ms) {
-//         (mapWait.get(a) || mapWait.set(a, waitRun()).get(a)!)
-//             .refreshAsync(ms, ()=> {
-//                 mapWait.delete(a)
-//                 t()})
-//     }
-//     else t()
-// }
-//
-// // Главная функция
-// export function useUpdateBy<T extends object>(
-//     a: T,
-//     f?: React.Dispatch<React.SetStateAction<T>> | ((a: T) => void)
-// ) {
-//     const [_, setCounter] = useState(0); // Состояние счётчика для обновлений
-//
-//     // Эффект для работы с объектом и картой
-//     useLayoutEffect(() => {
-//         // Если передан второй аргумент `f`, используем его, иначе создаём default-функцию
-//         const func = f ?? (() => {
-//             setCounter(prev => prev + 1);
-//         });
-//
-//         // Получаем карту из глобальной переменной map3 или создаём новую для объекта `a`
-//         const funcMap = map3.get(a) || map3.set(a, new Map()).get(a)!;
-//         funcMap.set(func, func); // Привязываем функцию обновления к объекту `a`
-//
-//         // Возвращаем функцию очистки (cleanup), чтобы удалить привязки
-//         return () => {
-//             funcMap.delete(func); // Удаляем функцию из карты
-//             if (funcMap.size === 0) {
-//                 map3.delete(a); // Удаляем объект из `map3`, если он больше не нужен
-//             }
-//         };
-//     }, [a, f]); // Указываем зависимости: объект `a` и функция `f`
-// }
-//
-// // Backward-compatible name (hook rules are the same).
-// export function updateBy<T extends object>(
-//     a: T,
-//     f?: React.Dispatch<React.SetStateAction<T>> | ((a: T) => void)
-// ) {
-//     return useUpdateBy(a, f);
-// }
-//
-// // export function updateBy<T extends object>(a: T, f?: React.Dispatch<React.SetStateAction<T>> | ((a: T) => void)) {
-// //     const t = useState(0)
-// //     useLayoutEffect(() => {
-// //         const func = f ?? ((a: T) =>{
-// //             // без особых причин только для первого рендера - необходима два вызова, иначе - вызов не проходит
-// //             if (t[0] == 0) {
-// //                 t[1](t[0]++)
-// //                 // t[1](t[0]++)
-// //             }
-// //             else t[1](t[0]++)
-// //         })
-// //         const r = (map3.get(a) || map3.set(a, new Map()).get(a)!)
-// //         r.set(func, func)
-// //         return ()=> {
-// //             r?.delete(func)
-// //         }
-// //     },[true])
-// // }
+const apiCache = new WeakMap();
+export function createUpdateApi(obj) {
+    const cached = apiCache.get(obj);
+    if (cached)
+        return cached;
+    const [, listen] = getUpdateListen(obj);
+    const api = {
+        object: obj,
+        emit(ms) { renderBy(obj, ms); },
+        render(ms) { renderBy(obj, ms); },
+        renderReverse(ms, reverse = true) { renderByRevers(obj, ms, reverse); },
+        renderLast(ms) { renderByLast(obj, ms); },
+        on(listener) {
+            return listen.on((value) => listener(value));
+        },
+        subscribe(listener) {
+            return api.on(listener);
+        },
+        use(f) {
+            useUpdateBy(obj, f);
+        },
+        useSubscribe(f) {
+            useUpdateBy(obj, f);
+        },
+    };
+    apiCache.set(obj, api);
+    return api;
+}
+export function useUpdateByApi(obj, f) {
+    useUpdateBy(obj, f);
+    return createUpdateApi(obj);
+}

package/lib/index.js

@@ -1,3 +1 @@
 export * from "./common/api";
-import { test } from "./common/api";
-test();

package/lib/style/menuRight.css

@@ -1,18 +1,5 @@
-:root {
-  --base-border: 1px solid rgba(255, 255, 255, 0.41);
-  --base-color-hover: #fff;
-}
-:root {
-  --menu-bg-color: rgba(12, 12, 12, 0.91);
-  --menu-blur: 10px;
-  --menu-border: var(--base-border);
-  --menu-active-background: rgba(255, 255, 255, 0.23);
-
-  --menu-item-color: var(--base-color-hover);
-  --menu-item-hover-color: #101010;
-  --menu-item-hover-bg-color: var(--base-color-hover);
-
-}
+/* Tokens moved to tokens.css (same values) */
+@import "./tokens.css";
 
 .menu-container{
   position: fixed;
@@ -74,8 +61,8 @@
 .submenu {
   background: var(--menu-bg-color);
 
-  backdrop-filter: blur(var(--menu-blur)); /* Размытие */
-  -webkit-backdrop-filter: blur(var(--menu-blur)); /* Для Safari */
+  backdrop-filter: blur(var(--menu-blur)); /* Blur */
+  -webkit-backdrop-filter: blur(var(--menu-blur)); /* For Safari */
 
   border: var(--menu-border);
   min-width: 200px;
@@ -85,11 +72,11 @@
   /*padding: 20px;*/
   /*margin: 20px;*/
   /*background-color: #fff;*/
-  /*border: 1px solid #ddd; !* базовая граница, можно убрать *!*/
+  /*border: 1px solid #ddd; !* base border, can be removed *!*/
   cursor: pointer;
 }
 
-/* Псевдоэлемент для отрисовки обводки */
+/* Pseudo-element for drawing the outline */
 .draggable-div::after {
   content: "";
   position: absolute;
@@ -102,19 +89,19 @@
   box-sizing: border-box;
 }
 
-/* Запуск анимации, когда зажата кнопка мыши */
+/* Start the animation while the mouse button is held */
 .draggable-div.outline-animation::after {
   animation: running-line 0.5s linear forwards;
 }
 
-/* Если анимация успела завершиться, обводка остается */
+/* If the animation completed, the outline remains */
 .draggable-div.outline-complete::after {
   border-color: #007bff;
-  /* Чтобы псевдоэлемент точно отображал полную обводку */
+  /* Ensure the pseudo-element shows the full outline */
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
 }
 
-/* Анимация «бегущей линии» */
+/* Running line animation */
 @keyframes running-line {
   0% {
     border-color: transparent;
@@ -122,15 +109,15 @@
   }
   25% {
     border-color: #007bff;
-    /* Рисуем верхнюю линию */
+    /* Draw the top line */
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }
   50% {
-    /* Добавляем правую сторону */
+    /* Add the right side */
     clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);
   }
   75% {
-    /* Добавляем нижнюю сторону */
+    /* Add the bottom side */
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }
   100% {

package/lib/style/style.css

@@ -1,21 +1,7 @@
-:root {
-  /* Основные фоновые цвета */
-  --color-bg-dark: #131821;
-  --color-bg-light: #17202e;
+/* Tokens moved to tokens.css (same values) */
+@import "./tokens.css";
 
-  /* Скролл */
-  --color-scrollbar-track: rgba(255, 255, 255, 0);
-  --color-scrollbar-thumb: #1d262c;
-  /* альтернатива для MSTradeScroll */
-  --color-scrollbar-thumb-alt: #4c4562;
-
-  /* Основные текстовые/обводки */
-  --color-text-base: #c4c4c4;
-  --color-text-theme: #5D9FFA;
-  --color-border-common: rgb(50, 62, 71);
-}
-
-/* Сбрасываем box-sizing */
+/* Reset box-sizing */
 *,
 *::before,
 *::after {
@@ -24,7 +10,7 @@
   box-sizing: border-box;
 }
 
-/* Основные фоны */
+/* Main backgrounds */
 html,
 .fon {
   background: var(--color-bg-dark);
@@ -33,16 +19,16 @@ html,
   background: var(--color-bg-light);
 }
 
-/* Стили прокрутки (scrollbar) */
+/* Scrollbar styles */
 body::-webkit-scrollbar {
-  width: 12px; /* ширина scrollbar */
+  width: 12px; /* scrollbar width */
 }
 ::-webkit-scrollbar-track {
-  background: var(--color-scrollbar-track); /* цвет дорожки */
+  background: var(--color-scrollbar-track); /* track color */
 }
 ::-webkit-scrollbar-thumb {
-  background-color: var(--color-scrollbar-thumb); /* цвет плашки */
-  border-radius: 20px; /* закругления плашки */
+  background-color: var(--color-scrollbar-thumb); /* thumb color */
+  border-radius: 20px; /* thumb rounding */
 }
 
 .MSTradeScroll .ag-body-viewport::-webkit-scrollbar-track {
@@ -53,7 +39,7 @@ body::-webkit-scrollbar {
   border-radius: 20px;
 }
 
-/* Дублирующие селекторы scrollbar, если нужна поддержка под некоторыми движками */
+/* Duplicate scrollbar selectors for engines that need them */
 *::-webkit-scrollbar {
   width: 12px;
 }
@@ -65,7 +51,7 @@ body::-webkit-scrollbar {
   border-radius: 20px;
 }
 
-/* Кнопки */
+/* Buttons */
 .defButton {
   padding: 20px;
   display: block;
@@ -85,7 +71,7 @@ html {
   display: flex;
 }
 
-/* инпуты */
+/* Inputs */
 .toNumberInput {
   width: 70px;
   margin-right: 10%;
@@ -94,7 +80,7 @@ input:invalid {
   box-shadow: 0 0 5px 1px red;
 }
 
-/* Блоки-кнопки, миниэлементы */
+/* Button blocks, mini elements */
 .toButton,
 .miniEl,
 .toButtonA,
@@ -104,7 +90,7 @@ input:invalid {
   cursor: default;
 }
 
-/* Кнопки Switch */
+/* Switch buttons */
 .LeftMenuParameters {
   font-size: 12px;
   min-height: 30px;
@@ -116,7 +102,7 @@ input:invalid {
   font-size: 12px;
 }
 
-/* Заполнение последнего дива на всю оставшуюся часть */
+/* Fill the remaining space with the last div */
 .toSpace,
 .toSpaceColum {
   display: flex;
@@ -131,7 +117,7 @@ input:invalid {
   flex: 1 1 100%;
 }
 
-/* Кнопки */
+/* Buttons */
 .toButton {
   padding: 8px 10px;
   height: 30px;
@@ -148,7 +134,7 @@ input:invalid {
   display: block;
 }
 
-/* Меню */
+/* Menu */
 .MenuR {
   box-shadow: 0 0 20px 14px rgba(34, 60, 80, 0.2);
   margin-top: 4px;
@@ -178,7 +164,7 @@ input:invalid {
   border: solid 1px var(--color-border-common);
 }
 
-/* Наведение/активность */
+/* Hover/activity */
 .toButtonA,
 .miniEl:hover {
   user-select: none;
@@ -208,7 +194,7 @@ input:invalid {
   color: var(--color-text-theme);
 }
 
-/* Элементы меню-индикаторы */
+/* Menu indicator elements */
 .toIndicatorMenuButton {
   user-select: none;
   padding-left: 10px;
@@ -220,7 +206,7 @@ input:invalid {
   background: #3a4b57;
 }
 
-/* input-стили */
+/* Input styles */
 .inputCan {
   -webkit-writing-mode: horizontal-tb !important;
   text-rendering: auto;
@@ -254,7 +240,7 @@ input:invalid {
   border-image: none;
 }
 
-/* Кнопки формы */
+/* Form buttons */
 button[type="submit"] {
   background: #86b32d;
   border-bottom: 1px solid #5d7d1f;
@@ -270,7 +256,7 @@ input[type="color"] {
   display: block;
 }
 
-/* Основное тело */
+/* Main body */
 body {
   color: var(--color-text-base);
   vertical-align: middle;
@@ -285,13 +271,13 @@ body {
   display: flex;
 }
 
-/* Текстовые блоки */
+/* Text blocks */
 .toPTextIndicator {
   margin-block-start: 0.7em;
   margin-block-end: 0.7em;
 }
 
-/* React анимации появления/удаления */
+/* React enter/exit animations */
 .example-exit {
   opacity: 1;
   transform: translateY(0px);
@@ -302,7 +288,7 @@ body {
   transition: 0.3s;
 }
 
-/* Доп. стили .msTradeAlt */
+/* Additional .msTradeAlt styles */
 .msTradeAlt {
   font-size: 12px;
   cursor: default;
@@ -332,3 +318,29 @@ body {
   margin-top: -1px;
   margin-left: -1px;
 }
+
+/* Window close button (DivRnd3 and others) */
+.wenayCloseBtn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--color-bg-light);
+  border: 1px solid var(--color-border-common);
+  color: var(--color-text-base);
+  cursor: pointer;
+  user-select: none;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+  transition: background 0.15s, color 0.15s, transform 0.15s;
+}
+.wenayCloseBtn:hover {
+  background: #e5484d;
+  border-color: #e5484d;
+  color: #fff;
+  transform: scale(1.08);
+}
+.wenayCloseBtn:active {
+  transform: scale(0.95);
+}

package/lib/style/tokens.css

@@ -0,0 +1,34 @@
+/* Shared library design tokens. Values are collected from style.css and menuRight.css
+   without changes. TS mirror for inline styles and ag-grid themes - src/common/src/styles/tokens.ts */
+:root {
+  /* Main background colors */
+  --color-bg-dark: #131821;
+  --color-bg-light: #17202e;
+
+  /* Scroll */
+  --color-scrollbar-track: rgba(255, 255, 255, 0);
+  --color-scrollbar-thumb: #1d262c;
+  /* alternative for MSTradeScroll */
+  --color-scrollbar-thumb-alt: #4c4562;
+
+  /* Main text/outline colors */
+  --color-text-base: #c4c4c4;
+  --color-text-theme: #5D9FFA;
+  --color-border-common: rgb(50, 62, 71);
+
+  /* Menu base */
+  --base-border: 1px solid rgba(255, 255, 255, 0.41);
+  --base-color-hover: #fff;
+
+  /* Menu */
+  --menu-bg-color: rgba(12, 12, 12, 0.91);
+  --menu-blur: 10px;
+  --menu-border: var(--base-border);
+  --menu-active-background: rgba(255, 255, 255, 0.23);
+  --menu-item-color: var(--base-color-hover);
+  --menu-item-hover-color: #101010;
+  --menu-item-hover-bg-color: var(--base-color-hover);
+
+  /* Layers */
+  --wenay-z-modal: 9999;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wenay-react2",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "Common react",
   "strict": true,
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-rnd": "^10.5.3",
-    "wenay-common2": "^1.0.28"
+    "wenay-common2": "^1.0.49"
   },
   "peerDependencies": {
     "react": "^19.2.0",