wenay-react2 1.0.39 → 1.0.40

package/lib/common/src/hooks/useKeyboard.js

@@ -1,9 +1,10 @@
 import { useEffect, useRef } from "react";
-import { renderBy } from "../../updateBy";
+import { createUpdateApi } from "../../updateBy";
 import { listen as createListen } from "wenay-common2";
 export const keyboardState = {
     key: ""
 };
+const keyboardStateApi = createUpdateApi(keyboardState);
 const [emitKeyDown, keyboardListen] = createListen();
 export const keyboard = {
     get key() { return keyboardState.key; },
@@ -11,7 +12,7 @@ export const keyboard = {
     get() { return keyboardState.key; },
     clear() {
         keyboardState.key = "";
-        renderBy(keyboardState);
+        keyboardStateApi.render();
         emitKeyDown("", undefined);
     },
     reset() {
@@ -38,7 +39,7 @@ export function useKeyboard(options = {}) {
             if (!(event instanceof KeyboardEvent))
                 return;
             keyboardState.key = event.key;
-            renderBy(keyboardState);
+            keyboardStateApi.render();
             emitKeyDown(event.key, event);
             onKeyDownRef.current?.(event.key, event);
         };

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

@@ -1,92 +1,12 @@
-import { Params } from "wenay-common2";
-type LogInput<T extends object> = T & {
-    id: string;
-    var?: number;
-    time: Date;
-    txt: string;
-};
-declare const getSettingLogs: () => {
-    minVarLogs: {
-        name: string;
-        range: {
-            min: number;
-            max: number;
-            step: number;
-        };
-        value: number;
-    };
-    minVarMessage: {
-        name: string;
-        range: {
-            min: number;
-            max: number;
-            step: number;
-        };
-        value: number;
-    };
-    timeShow: {
-        name: string;
-        range: {
-            min: number;
-            max: number;
-            step: number;
-        };
-        value: number;
-    };
-    show: {
-        name: string;
-        value: boolean;
-    };
-};
-export declare function getLogsApi<T extends object = {}>(setting: {
-    limit?: number;
-    limitPer: number;
-    varMin?: number;
-}): {
-    addLogs(a: LogInput<T>): void;
+import { getSettingLogs, type LogEntry, type LogsApiOptions } from "./logsController";
+export { createLogsController, createLogsControllerState, getSettingLogs, } from "./logsController";
+export type { CreateLogsControllerOptions, LogsApiOptions, LogsController, LogsControllerState, LogsFullState, LogsMiniState, } from "./logsController";
+export declare function getLogsApi<T extends object = {}>(setting: LogsApiOptions): {
+    addLogs: (input: import("./logsController").LogInput<T>) => LogEntry<T>;
     params: {
-        def: () => {
-            minVarLogs: {
-                name: string;
-                range: {
-                    min: number;
-                    max: number;
-                    step: number;
-                };
-                value: number;
-            };
-            minVarMessage: {
-                name: string;
-                range: {
-                    min: number;
-                    max: number;
-                    step: number;
-                };
-                value: number;
-            };
-            timeShow: {
-                name: string;
-                range: {
-                    min: number;
-                    max: number;
-                    step: number;
-                };
-                value: number;
-            };
-            show: {
-                name: string;
-                value: boolean;
-            };
-        };
-        get(): {
-            minVarLogs: number;
-            minVarMessage: number;
-            timeShow: number;
-            show: boolean;
-        } & {
-            readonly [key: number]: void;
-        };
-        set(a: Params.SimpleParams<ReturnType<typeof getSettingLogs>>): void;
+        def: typeof getSettingLogs;
+        get(): import("./logsController").LogsSettings;
+        set(settings: import("./logsController").LogsSettings): void;
     };
     React: {
         Setting: typeof InputSettingLogs;
@@ -95,55 +15,16 @@ export declare function getLogsApi<T extends object = {}>(setting: {
     };
 };
 export declare const logsApi: {
-    addLogs(a: {
+    addLogs: (input: {
         id: string;
         var?: number;
         time: Date;
         txt: string;
-    }): void;
+    }) => LogEntry<{}>;
     params: {
-        def: () => {
-            minVarLogs: {
-                name: string;
-                range: {
-                    min: number;
-                    max: number;
-                    step: number;
-                };
-                value: number;
-            };
-            minVarMessage: {
-                name: string;
-                range: {
-                    min: number;
-                    max: number;
-                    step: number;
-                };
-                value: number;
-            };
-            timeShow: {
-                name: string;
-                range: {
-                    min: number;
-                    max: number;
-                    step: number;
-                };
-                value: number;
-            };
-            show: {
-                name: string;
-                value: boolean;
-            };
-        };
-        get(): {
-            minVarLogs: number;
-            minVarMessage: number;
-            timeShow: number;
-            show: boolean;
-        } & {
-            readonly [key: number]: void;
-        };
-        set(a: Params.SimpleParams<ReturnType<typeof getSettingLogs>>): void;
+        def: typeof getSettingLogs;
+        get(): import("./logsController").LogsSettings;
+        set(settings: import("./logsController").LogsSettings): void;
     };
     React: {
         Setting: typeof InputSettingLogs;
@@ -163,4 +44,3 @@ export declare function MessageEventLogs({ zIndex }: {
 export declare function LogsPage({ update }: {
     update?: number;
 }): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AgGridReact } from "ag-grid-react";
 import { useCallback, useEffect, useRef } from "react";
 import { copyToClipboard, Params, timeLocalToStr_hhmmss } from "wenay-common2";
 import { renderBy, updateBy } from "../../updateBy";
@@ -7,6 +6,9 @@ import { contextMenu } from "../menu/menuMouse";
 import { memoryGetOrCreate } from "../utils/memoryStore";
 import { ParamsEditor } from "../components/ParamsEditor";
 import { logDividerGradient, logSeverityBackground, logStyleTokens } from "./logStyles";
+import { AgGridTable, colDefCentered } from "../grid/agGrid4";
+import { createLogsController, createLogsControllerState, getSettingLogs, } from "./logsController";
+export { createLogsController, createLogsControllerState, getSettingLogs, } from "./logsController";
 const cashLogs = new Map();
 const datumConst = {
     map: cashLogs,
@@ -14,39 +16,25 @@ const datumConst = {
 const datumMiniConst = {
     last: []
 };
-const getSettingLogs = () => ({
-    minVarLogs: { name: "min. importance for notifications", range: { min: 0, max: 25, step: 1 }, value: 0 },
-    minVarMessage: { name: "min. importance for log table", range: { min: 0, max: 25, step: 1 }, value: 0 },
-    timeShow: { name: "screen display time", range: { min: 1, max: 20, step: 1 }, value: 2 },
-    show: { name: "show", value: true }
-});
 const settingLogs = { params: Params.GetSimpleParams(getSettingLogs()) };
+const logGridDefaultColDef = { ...colDefCentered, wrapText: true };
 // varMin - minimum importance
 export function getLogsApi(setting) {
     const datum = memoryGetOrCreate("settingLogs", settingLogs);
-    function addToArr(arr, data, limit) {
-        arr.unshift(data);
-        if (arr.length > limit)
-            arr.length = limit;
-    }
-    let num = 0;
+    const controller = createLogsController({
+        options: setting,
+        state: createLogsControllerState({
+            full: datumConst,
+            mini: datumMiniConst,
+            settings: datum,
+        }),
+        onFullChange: () => renderBy(datumConst),
+        onMiniChange: () => renderBy(datumMiniConst),
+        onSettingsChange: () => renderBy(datum),
+    });
     return {
-        addLogs(a) {
-            const item = { ...a, num: num++ };
-            addToArr(datumMiniConst.last, item, setting.limit ?? 50);
-            addToArr(datumConst.map.get(a.id) ?? datumConst.map.set(a.id, []).get(a.id), item, setting.limitPer);
-            renderBy(datumConst);
-            renderBy(datumMiniConst);
-        },
-        params: {
-            def: getSettingLogs,
-            get() { return datum.params; },
-            set(a) {
-                datum.params = a;
-                renderBy(datumMiniConst);
-                renderBy(datumConst);
-            },
-        },
+        addLogs: controller.addLogs,
+        params: controller.params,
         React: {
             Setting: InputSettingLogs,
             Message: MessageEventLogs,
@@ -136,7 +124,7 @@ export function PageLogs({ update }) {
                 width: 150,
             },
         ];
-        return _jsx("div", { className: "maxSize", children: _jsx(AgGridReact
+        return _jsx("div", { className: "maxSize", children: _jsx(AgGridTable
             // className = "ag-theme-alpine-dark ag-theme-alpine2" // ag-theme-alpine-dark3
             , { 
                 // className = "ag-theme-alpine-dark ag-theme-alpine2" // ag-theme-alpine-dark3
@@ -153,18 +141,11 @@ export function PageLogs({ update }) {
                         });
                     }
                 }, onSortChanged: (e) => {
-                }, defaultColDef: {
-                    headerClass: () => ("gridTable-header"),
-                    resizable: true,
-                    cellStyle: { textAlign: "center" },
-                    sortable: true,
-                    filter: true,
-                    wrapText: true,
-                }, headerHeight: 30, rowHeight: 26, autoSizePadding: 1, rowData: rowData, columnDefs: columns, onCellMouseDown: (e) => {
+                }, defaultColDef: logGridDefaultColDef, headerHeight: 30, rowHeight: 26, autoSizePadding: 1, rowData: rowData, columnDefs: columns, onCellMouseDown: (e) => {
                     if (e.event instanceof MouseEvent && e.event.button == 2) {
                         contextMenu.openAt(e.event, [
                             {
-                                name: "copy", onClick: () => { copyToClipboard(e.value); }
+                                name: "copy", actionKey: "logs.copyCell", onClick: () => { copyToClipboard(e.value); }
                             }
                         ]);
                     }

package/lib/common/src/logs/logsContext.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ColDef, GridReadyEvent } from 'ag-grid-community';
 /** -----------------------------
  *  1. Log types
  * -----------------------------
@@ -42,7 +43,32 @@ export declare function useLogsContext(): LogsContextValue;
  *     (PageLogs equivalent)
  * -----------------------------
  */
+export type LogsTableController = {
+    logs: LogEntry[];
+    minVarLogs: number;
+    gridRef: React.MutableRefObject<GridReadyEvent | null>;
+    columnDefs: ColDef[];
+    defaultColDef: ColDef;
+    onGridReady(params: GridReadyEvent): void;
+};
+export declare function useLogsTableController(): LogsTableController;
 export declare function LogsTable(): import("react/jsx-runtime").JSX.Element;
+/** -----------------------------
+ *  7. LogsNotifications component
+ *     (MessageEventLogs equivalent)
+ * -----------------------------
+ */
+export interface NotificationItem {
+    id: number;
+    log: LogEntry;
+}
+export type LogsNotificationsController = {
+    showMessages: boolean;
+    setShowMessages(value: boolean): void;
+    notifications: NotificationItem[];
+    visibleNotifications: NotificationItem[];
+};
+export declare function useLogsNotificationsController(): LogsNotificationsController;
 export declare function LogsNotifications(): import("react/jsx-runtime").JSX.Element;
 /** -----------------------------
  *  8. LogsSettings component

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridTable, colDefCentered } from '../grid/agGrid4';
 import { logDividerGradient, logSeverityBackground, logStyleTokens } from './logStyles';
 /** -----------------------------
  *  2. memoryGetOrCreate function -
@@ -93,15 +93,9 @@ export function useLogsContext() {
     }
     return ctx;
 }
-/** -----------------------------
- *  6. LogsTable component
- *     (PageLogs equivalent)
- * -----------------------------
- */
-export function LogsTable() {
+export function useLogsTableController() {
     const { logs, minVarLogs } = useLogsContext();
     const gridRef = useRef(null);
-    // Column definitions
     const columnDefs = useMemo(() => [
         {
             field: 'time',
@@ -126,12 +120,9 @@ export function LogsTable() {
         }
     ], []);
     const defaultColDef = useMemo(() => ({
-        resizable: true,
-        sortable: true,
-        filter: true,
+        ...colDefCentered,
         wrapText: true,
     }), []);
-    // Watch minVarLogs and configure the AG Grid filter
     useEffect(() => {
         if (gridRef.current?.api) {
             if (minVarLogs > 0) {
@@ -148,14 +139,19 @@ export function LogsTable() {
             }
         }
     }, [minVarLogs]);
+    const onGridReady = useCallback((params) => {
+        gridRef.current = params;
+        params.api.sizeColumnsToFit();
+    }, []);
+    return { logs, minVarLogs, gridRef, columnDefs, defaultColDef, onGridReady };
+}
+export function LogsTable() {
+    const table = useLogsTableController();
     return (
     // <div className="ag-theme-alpine-dark" style={{ width: '100%', height: '100%' }}>
-    _jsx("div", { style: { width: '100%', height: '100%' }, children: _jsx(AgGridReact, { ref: gridRef, onGridReady: (params) => {
-                gridRef.current = params;
-                params.api.sizeColumnsToFit();
-            }, rowData: logs, columnDefs: columnDefs, defaultColDef: defaultColDef, headerHeight: 30, rowHeight: 26 }) }));
+    _jsx("div", { style: { width: '100%', height: '100%' }, children: _jsx(AgGridTable, { onGridReady: table.onGridReady, rowData: table.logs, columnDefs: table.columnDefs, defaultColDef: table.defaultColDef, headerHeight: 30, rowHeight: 26 }) }));
 }
-export function LogsNotifications() {
+export function useLogsNotificationsController() {
     const { logs, minVarMessage, timeShow, showMessages, setShowMessages } = useLogsContext();
     const [notifications, setNotifications] = useState([]);
     const counterRef = useRef(0);
@@ -183,13 +179,22 @@ export function LogsNotifications() {
         timersRef.current.add(timer);
     }, [logs, minVarMessage, timeShow]);
     useEffect(() => () => { timersRef.current.forEach(clearTimeout); }, []);
-    if (!showMessages) {
+    return {
+        showMessages,
+        setShowMessages,
+        notifications,
+        visibleNotifications: notifications.slice(0, 10),
+    };
+}
+export function LogsNotifications() {
+    const controller = useLogsNotificationsController();
+    if (!controller.showMessages) {
         // If popups are hidden, show only "log"
         return (_jsx("div", { style: { position: 'absolute', right: 10, top: 10, zIndex: 999 }, children: _jsx("div", { style: {
                     background: logStyleTokens.toggleOffBg,
                     padding: '6px 10px',
                     cursor: 'pointer'
-                }, onClick: () => setShowMessages(true), children: "log" }) }));
+                }, onClick: () => controller.setShowMessages(true), children: "log" }) }));
     }
     // Otherwise render the current notification list
     return (_jsxs("div", { style: { position: 'absolute', right: 10, top: 10, zIndex: 999 }, children: [_jsx("div", { style: {
@@ -197,7 +202,7 @@ export function LogsNotifications() {
                     fontSize: '20px',
                     padding: '6px 10px',
                     cursor: 'pointer'
-                }, onClick: () => setShowMessages(false), children: "X" }), _jsx("div", { children: notifications.slice(0, 10).map(({ id, log }) => (_jsxs("div", { className: "testAnime example-exit", style: {
+                }, onClick: () => controller.setShowMessages(false), children: "X" }), _jsx("div", { children: controller.visibleNotifications.map(({ id, log }) => (_jsxs("div", { className: "testAnime example-exit", style: {
                         width: 200,
                         color: logStyleTokens.text,
                         marginTop: 10,

package/lib/common/src/logs/logsController.d.ts

@@ -0,0 +1,88 @@
+import { Params } from "wenay-common2";
+export type LogInput<T extends object = {}> = T & {
+    id: string;
+    var?: number;
+    time: Date;
+    txt: string;
+};
+export type LogEntry<T extends object = {}> = LogInput<T> & {
+    num: number;
+};
+export type LogsApiOptions = {
+    limit?: number;
+    limitPer: number;
+    varMin?: number;
+};
+export declare const getSettingLogs: () => {
+    minVarLogs: {
+        name: string;
+        range: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        value: number;
+    };
+    minVarMessage: {
+        name: string;
+        range: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        value: number;
+    };
+    timeShow: {
+        name: string;
+        range: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        value: number;
+    };
+    show: {
+        name: string;
+        value: boolean;
+    };
+};
+export type LogsSettingsDefinition = ReturnType<typeof getSettingLogs>;
+export type LogsSettings = Params.SimpleParams<LogsSettingsDefinition>;
+export type LogsFullState<T extends object = {}> = {
+    map: Map<string, LogEntry<T>[]>;
+};
+export type LogsMiniState<T extends object = {}> = {
+    last: LogEntry<T>[];
+};
+export type LogsSettingsState = {
+    params: LogsSettings;
+};
+export type LogsControllerState<T extends object = {}> = {
+    full: LogsFullState<T>;
+    mini: LogsMiniState<T>;
+    settings: LogsSettingsState;
+};
+export type LogsControllerEvents = {
+    onFullChange?: () => void;
+    onMiniChange?: () => void;
+    onSettingsChange?: () => void;
+};
+export type CreateLogsControllerOptions<T extends object = {}> = LogsControllerEvents & {
+    options: LogsApiOptions;
+    state?: LogsControllerState<T>;
+};
+export type LogsController<T extends object = {}> = {
+    state: LogsControllerState<T>;
+    options: LogsApiOptions;
+    addLogs(input: LogInput<T>): LogEntry<T>;
+    getRows(): LogEntry<T>[];
+    getMiniRows(): LogEntry<T>[];
+    getLatest(): LogEntry<T> | undefined;
+    params: {
+        def: typeof getSettingLogs;
+        get(): LogsSettings;
+        set(settings: LogsSettings): void;
+    };
+};
+export declare function createLogsControllerState<T extends object = {}>(state?: Partial<LogsControllerState<T>>): LogsControllerState<T>;
+export declare function createLogsController<T extends object = {}>({ options, state, onFullChange, onMiniChange, onSettingsChange, }: CreateLogsControllerOptions<T>): LogsController<T>;

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

@@ -0,0 +1,54 @@
+import { Params } from "wenay-common2";
+export const getSettingLogs = () => ({
+    minVarLogs: { name: "min. importance for notifications", range: { min: 0, max: 25, step: 1 }, value: 0 },
+    minVarMessage: { name: "min. importance for log table", range: { min: 0, max: 25, step: 1 }, value: 0 },
+    timeShow: { name: "screen display time", range: { min: 1, max: 20, step: 1 }, value: 2 },
+    show: { name: "show", value: true }
+});
+function addToArr(arr, data, limit) {
+    arr.unshift(data);
+    if (arr.length > limit)
+        arr.length = limit;
+}
+export function createLogsControllerState(state = {}) {
+    return {
+        full: state.full ?? { map: new Map() },
+        mini: state.mini ?? { last: [] },
+        settings: state.settings ?? { params: Params.GetSimpleParams(getSettingLogs()) },
+    };
+}
+export function createLogsController({ options, state = createLogsControllerState(), onFullChange, onMiniChange, onSettingsChange, }) {
+    let num = 0;
+    return {
+        state,
+        options,
+        addLogs(input) {
+            const item = { ...input, num: num++ };
+            addToArr(state.mini.last, item, options.limit ?? 50);
+            const perId = state.full.map.get(input.id) ?? state.full.map.set(input.id, []).get(input.id);
+            addToArr(perId, item, options.limitPer);
+            onFullChange?.();
+            onMiniChange?.();
+            return item;
+        },
+        getRows() {
+            return [...state.full.map.values()].flat();
+        },
+        getMiniRows() {
+            return state.mini.last.slice();
+        },
+        getLatest() {
+            return state.mini.last[0];
+        },
+        params: {
+            def: getSettingLogs,
+            get() { return state.settings.params; },
+            set(settings) {
+                state.settings.params = settings;
+                onSettingsChange?.();
+                onMiniChange?.();
+                onFullChange?.();
+            },
+        },
+    };
+}

package/lib/common/src/logs/miniLogs.d.ts

@@ -1,5 +1,71 @@
-import { CellMouseDownEvent } from "ag-grid-community";
-export declare function MiniLogs<T = any>({ data, onClick }: {
+import React from "react";
+import type { CellMouseDownEvent, ColDef, GridApi, GridPreDestroyedEvent, GridReadyEvent } from "ag-grid-community";
+import { type AgGridTableProps } from "../grid/agGrid4";
+export declare const miniLogsColumnDefs: ({
+    field: string;
+    sort: "desc";
+    width: number;
+    valueFormatter: (e: import("ag-grid-community").ValueFormatterParams<any, any, any>) => any;
+    wrapText?: undefined;
+    autoHeight?: undefined;
+} | {
+    field: string;
+    width: number;
+    sort?: undefined;
+    valueFormatter?: undefined;
+    wrapText?: undefined;
+    autoHeight?: undefined;
+} | {
+    field: string;
+    wrapText: true;
+    autoHeight: true;
+    width: number;
+    sort?: undefined;
+    valueFormatter?: undefined;
+})[];
+export declare const miniLogsDefaultColDef: {
+    wrapText: true;
+    headerClass: () => string;
+    resizable: true;
+    cellStyle: {
+        textAlign: string;
+    };
+    sortable: true;
+    filter: boolean;
+};
+export type UseMiniLogsTableOptions<T = any> = {
     data: T[];
     onClick?: (e: CellMouseDownEvent<T>) => any;
-}): import("react/jsx-runtime").JSX.Element;
+    columnDefs?: ColDef<T>[];
+    defaultColDef?: ColDef<T>;
+};
+export type MiniLogsTableController<T = any> = {
+    rows: T[];
+    columns: ColDef<T>[];
+    columnDefs: ColDef<T>[];
+    defaultColDef: ColDef<T>;
+    apiRef: React.RefObject<GridApi<T> | null>;
+    fit: () => boolean;
+    getApi: () => GridApi<T> | null;
+    withApi: <R>(fn: (api: GridApi<T>) => R) => R | undefined;
+    onGridReady: (e: GridReadyEvent<T>) => void;
+    onGridPreDestroyed: (e: GridPreDestroyedEvent<T>) => void;
+    onCellMouseDown: (e: CellMouseDownEvent<T>) => void;
+    props: AgGridTableProps<T>;
+    tableProps: AgGridTableProps<T>;
+    gridProps: AgGridTableProps<T>;
+};
+export type MiniLogsController<T = any> = MiniLogsTableController<T>;
+export type MiniLogsViewProps<T = any> = {
+    controller: MiniLogsTableController<T>;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export type MiniLogsTableProps<T = any> = UseMiniLogsTableOptions<T> & {
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare function useMiniLogsTable<T = any>(options: UseMiniLogsTableOptions<T>): MiniLogsTableController<T>;
+export declare function MiniLogsView<T = any>({ controller, className, style }: MiniLogsViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function MiniLogsTable<T = any>({ className, style, ...options }: MiniLogsTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function MiniLogs<T = any>(props: MiniLogsTableProps<T>): import("react/jsx-runtime").JSX.Element;